Question

我知道很多次问过这个问题，但我找不到解决问题的方法。

我有这个HTML代码：

<html style="height: 100%">
    <body style="height: 100%">
        <div style="height: 100%">
            <div>Title</div>
            <div style="height: 100%">Content</div>
        </div>
    </body>
</html>

我希望我的DIV内容将填充父div的剩余空间我之前看到的每个问题都说在孩子DIV中做style="height: 100%"。使用style="height: 100%"，它会获得父div的相同大小，因此我的页面变得大于100％（页面有滚动条）。

height: 100%

（html，body和parent div标签与视口相同）

我只想用可用空间填充父div，而不是更多。

fill available space

here你可以找到实例。

我可以这样做吗？

Answer 1

为什么你要让title 100％身高......没有任何意义.....一般的想法是container与100%高度，并在其中创建您的子类div

制作标题20%和内容80% - 最好是最佳选项
fiddle
或在overflow:hidden - 上使用content只有在您确定内容不超出隐藏的情况下才会使用此选项，此选项仅用于隐藏多余的div内容不存在
或在css（cross browser but not supported by old browser）中使用calc() fiddle

Answer 2

似乎不可能只通过css。你可以使用jquery。

试试这个演示。有了这个，您还可以管理响应式布局

http://jsfiddle.net/amoljawale/7WC7N/25/

修改

<强> http://jsfiddle.net/amoljawale/7WC7N/27/

var _init = function () { parentHeight = $('.parent').outerHeight(true); titleHeight = $('.title').outerHeight(true); childHeight = parentHeight - titleHeight; $('.child').height(childHeight); } $(document).ready(function () { _init(); }) $(window).resize(function () { _init(); });

Answer 3

这可以在没有Javascript的情况下完成。

假设：

没有其他部分/元素（必填）
标题可能是fix-height（我假设这是厚颜无耻的）

将标题div和内容div置于绝对位置，并将内容包装在允许溢出的另一个div内。内容div将从顶部和底部定位。

HTML结构：

<div class="title">
    Title
</div>
<div class="content">
    <div class="content-content">
        Content
    </div>
</div>

<强> CSS：

html, body {
    height: 100%;
    margin: 0;
}

.title {
    top: 0;
    position: absolute;
    width: 100%;
    height: 200px;
}

.content {
    width: 100%;
    position: absolute;
    top: 200px;
    bottom: 0;
}

请参阅此小提琴：http://jsfiddle.net/43zF2/

Answer 4

另一种无Javascript解决方案，即更多 flex ible正在使用Flexbox。

与我的另一个答案相反，这也允许灵活的标题高度。

HTML结构：

<div class="title">
    Title
</div>
<div class="content">
    <div class="content-content">
        Content
    </div>
</div>

<强> CSS：

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

body处于弹性列模式。内容的flex值为1以填充body。允许content-content包装器溢出。

适用于Firefox 28+和Chrome 33+，适用于IE 11+（无法测试ATM）。 IE 10当然可能需要一些古怪的（CSS）变通办法/补充和供应商前缀。

You can use flexbox

请参阅此小提琴http://jsfiddle.net/J63vF/1/

CSS填充父可用空间

4 个答案: