How to fill 100% of remaining height?

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.

here is an example of my html

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

Or is this method wrong? How should I do this? please see my demo and show me my mistake.

145271 次浏览
小开

要使页面上的 div高度达到100% ，还需要将 div 上方层次结构中的每个对象设置为100% 。例如:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

虽然我不能完全理解你的问题，但我想这就是你的意思。

这就是我的例子:

<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">


</div>
</div>
</body>
</html>

Style只是我还没有外化的 CSS 的替代品。

小开
最佳答案

如果添加一个 div (下面的 #header)来包装内容为1，那么应该可以做到这一点。

  1. 如果使 #header浮动，则来自 #someid的内容将被迫围绕它流动。

  2. 接下来，将 #header的宽度设置为100% 。这将使其展开以填充包含 div 的 #full的宽度。这将有效地推动所有的 #someid的内容低于 #header，因为没有空间流动的两侧了。

  3. 最后，将 #someid的高度设置为100% ，这将使其与 #full的高度相同。

JSFiddle

超文本标示语言

<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
height: 100%;
}


#header {
float: left;
width: 100%;
}

更新

我认为值得一提的是，现在的浏览器都很支持 Flexbox。CSS 可以改变，让 #full成为一个 Flex 容器，并且 #someid应该将它的 flex 增长设置为一个大于 0的值。

html, body, #full {
height: 100%;
}


#full {
display: flex;
flex-direction: column;
}


#someid {
flex-grow: 1;
}
小开

我为那些太短的页面添加了这个。

Html:

<section id="secondary-foot"></section>

Css:

section#secondary-foot {
height: 100%;
background-color: #000000;
position: fixed;
width: 100%;
}
小开

这可以通过表格来实现:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>

然后应用 css 来填充剩余的空间:

#someid {
height: 100%;
}

现在，我可以听到人群中愤怒的喊叫，“哦，不，他在用桌子！把他喂狮子!”请听我说完。

与已接受的答案不同，这个解决方案除了使容器 div 为页面的整个高度之外什么也没有完成，这个解决方案使 div # 2按照问题中的要求填充剩余的空间。如果您需要第二个 div 来填充分配给它的整个高度，那么这是目前唯一的方法。

但是，请随意证明我错了，当然! CSS 总是更好。

小开 

    html,
body {
height: 100%;
}


.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}


.child-top {
flex: 0 1 auto;
background: pink;
}


.child-bottom {
flex: 1 1 auto;
background: green;
}
    <div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>

小开

我知道这是一个晚期的条目，但即使在2016年，我很惊讶的完全缺乏 IE 对 flex 的支持(目前11是唯一一个支持它和它的主要错误在该 http://caniuse.com/#feat=flexbox) ，从商业的角度来看，这是不是伟大的！所以我认为在 IE 关闭之前，最好的解决方案和最友好的跨浏览器解决方案肯定是 JS/Jquery 解决方案？

大多数网站已经使用了 Jquery，一个非常简单的例子(对于我的代码)是:

$('#auto_height_item').height($(window).height() - $('#header').height());

显然，您可以替换窗口和头部，并让基本的数学工作。就我个人而言，我还是不相信 Flex..。

小开

创建一个包含 div (full 和 somid)的 div，并将该 div 的高度设置为:

高度: 100vh;

包含 div (full 和 some)的高度应设置为“ auto”。 仅此而已。

小开

我知道这是一个老问题，但现在有一个超级简单的形式来做到这一点，这是 CCS 网格，所以让我把 div 作为例子:

<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>

then the CSS code:

.full{
width:/*the width you need*/;
height:/*the height you need*/;
display:grid;
grid-template-rows: minmax(100px,auto) 1fr;
}

就是这样，第二排，剪刀，一些，将采取高度的其余部分 因为属性为1fr，所以第一个 div 的最小值为100px，最大值为 不惜一切代价。

我必须说，CSS 已经进步了很多，使程序员的生活更容易。


提交答案