溢出：隐藏和％高度

发布于 2024-12-10 07:12:07 字数 652 浏览 0 评论 0原文

我正在创建一个页面，我不需要任何固定的 px 高度，并且还使用溢出：隐藏。

我的 HTML 的形式为；

<div class="scrollable fl">
...Some content
</div>

CSS 定义为：

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

另外补充一下，我已经给可滚动的所有父级/祖先div赋予了overflow：hidden（对于某些父级也带有float：left）。

现在的问题是，如果我，可滚动div不会根据其内容扩展将高度设置为 100%（它适用于固定 px 高度...但我没有这个选项，因为我正在设计一个完全流畅的布局）

我从我这边尝试了 2 件事，但不起作用； 1. 保持高度链处于活动状态（即为可滚动的所有父级/祖先 div 提供 100% 的高度）。 2. 尝试使用 height:auto 实现可滚动

如何解决此问题？

原文

I am creating a page where I do not want any fixed px height and also use overflow:hidden.

My HTML is of the form;

<div class="scrollable fl">
...Some content
</div>

The CSS is defined as;

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

Also just to add, I have given overflow:hidden (with float:left as well for some parent) to all the parent/ancestor divs of scrollable ..

Now the issue is that the scrollable div is not expanding as per it's content if I give height as 100% (It does for fixed px height...But I do not have that option since I am designing a completely fluid layout)

I tried 2 things from my side which did not work;
1. Keeping height chain alive (i.e. giving 100% height to all parent/ancestor divs of scrollable .
2. Trying with height:auto for scrollable

How do I fix this issue?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野の 2024-12-17 07:12:07

div 设置为其内容所需高度的 100%，而不是您想要的高度。

尝试：

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    position: relative;
    top:0px;
    bottom:0px;
    width: 100%;
}

您可能还需要对链上的其他元素执行此操作。

The div is set to 100% of the height required by it's contents, not what you want.

try:

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    position: relative;
    top:0px;
    bottom:0px;
    width: 100%;
}

You may need to do this for other elements up the chain as well.

回复收藏 0 原文

~没有更多了~