0 
<div id="main" style="overflow:hidden;height:80%;>
    <div id="header">
    </div>
    <div id="content" style="overflow:hidden;">
    </div>
</div>

我在主 div 中有两个 div，我希望内容 div 填满主 div 的其余部分，但如果内容填满内容 div 超过其填充高度，我不希望内容 div 增长任何更高。

我见过其他一些类似这样的 stackoverflow 问题，但没有一个答案对我有用。试过：让DIV垂直填充页面的其余部分？,获取 CSS Div 以填充可用高度, 以及如何使 DIV 填充浏览器窗口的剩余垂直空间？

我认为主要区别在于我需要内容 div 填充，但也不会溢出。这可能只用css吗？

更新：我一直在尝试不同的代码，这就是我想要的：http: //jsfiddle.net/zXnnp/。但由于某种原因，我无法在我的本地主机上复制它。然后我发现这是因为我在使用http://jamesflorentino.github.io/nanoScrollerJS/并且由于某种原因 class="nano" 在内容 div 上搞砸了。还在调查哪里出了问题。

更新 2：class="nano" 有高度：100%；所以我只是用 height:auto; 覆盖它 现在一切都很好。感谢所有的帮助！

4

4 回答 4

0

我不确定你在追求什么，但也许这会让你接近：

http://jsfiddle.net/isherwood/TCVvn/1

#main {
    height: 80%;
    width: 80%;
    position: absolute;
}
#header {
    height: 50px;
    position: relative;
    top: 0;
}
#content {
    position: absolute;
    top: 70px;
    right: 5px;
    left: 5px;
    bottom: 5px;
    overflow: auto;
}

<div id="main">
    <div id="header">Header</div>
    <div id="content">Content</div>
</div>
于 2013-04-25T19:26:21.660 回答
0

您是否尝试过使用 CSS 属性 max-height？这是来自 CSS 2，不应该有任何兼容性问题。

http://www.w3schools.com/cssref/pr_dim_max-height.asp

如果您发布一些可编辑的代码，那么我们可以使用它并帮助您找到使其工作的一些方法。

于 2013-04-25T19:19:28.343 回答
0

你可以这样做：

/* stretch the body to full height */
body, html {
    height: 100%;
}

/* stretching the containers */
#header {
     height: 50px; /* just a random number i chose, not sure what you wanted here */   
}
#content {
    height: 100%;
    margin-bottom: -50px; /* same as the header height, but negative */
}

你可以在这里看到代码：http: //jsfiddle.net/mRK24/

神奇之处在于首先将您的身体拉伸到视口高度。然后#main 将变为视口高度的 80%。接下来，您给标题一些固定的高度，并将内容设置为 100% 的高度，底部边距与标题的高度相同。

请注意，由于overflow:hidden;. 奇怪，因为您不知道用户视口的高度，所以您无法知道多少。也许您应该考虑将内容的溢出设置为滚动，因为我无法想象您会希望部分内容不可见。

于 2013-04-25T19:34:44.657 回答
0

继续overflow:hidden，<div id="#main">让内容 div 尽可能高，没有溢出限制。#main如果它太高#content而无法放入#main.

于 2013-04-25T19:45:23.290 回答