如何填充剩余高度的100％？
+--------------------+ | | | | | | | | | 1 | | | | | | | | | +--------------------+ | | | | | | | | | 2 | | | | | | | | | +--------------------+ （1）的内容是未知的，因为它可能增加或减lessdynamic生成的页面。 第二个div（2）如上图所示，应该填充剩余空间。
这里是我的HTML的一个例子
<div id="full"> <!--contents of 1 --> <div id="someid"> <!--contents of 2 --> </div> </div>
三网融合
#full{width: 300px; background-color: red;} #someid{height: 100%;}
或者这种方法是错误的？ 我应该怎么做？ 请看我的演示，并告诉我我的错误。
你应该可以做到这一点，如果你添加一个div（下面的#header ）来包装你的内容1。
-
如果你浮动
#someid，#someid的内容将被迫绕过它。 -
接下来，将
#header的宽度设置为100％。 这将使其扩大以填充包含div的宽度#full。 这将有效地将#someid的所有内容推到#header下面，因为再也没有空间可以stream动了。 -
最后，将
#someid的高度设置为100％，这将使其与#full高度相同。
的jsfiddle
HTML
<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成为一个弹性容器， #someid应该设置它的flex增长到一个大于0的值。
html, body, #full { height: 100%; } #full { display: flex; flex-direction: column; } #someid { flex-grow: 1; }
要在页面上获得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的替代品。
这可以用表格完成：
<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填补剩下的空间：
#someid { height: 100%; }
现在，我只能听到人群中愤怒的喊声：“哦，他用桌子喂他喂狮子！” 请听我说。
与接受的答案不同，除了使容器div成为页面的整个高度外，这个解决scheme使得div＃2填充问题中要求的剩余空间。 如果你需要第二个div来填充分配给它的全部高度，这是目前唯一的方法。
但是，当然可以随时certificate我错了！ 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年，我很惊讶，由于完全缺乏对flex的IE支持（目前11是唯一支持它，它的主要错误在http://caniuse.com/#feat= flexbox ）从商业angular度来看并不是很好！ 所以我认为，直到IE浏览器closures最好的解决scheme和大多数跨浏览器友好的必定是一个JS / JQuery的？
大多数网站已经使用JQuery和一个非常简单的例子（为我的代码）是：
$('#auto_height_item').height($(window).height() - $('#header').height());
你显然可以取代窗口和标题，让基本的math工作。 就个人而言，我仍然不相信有关柔性…
我添加了这个页面太短。
HTML：
<section id="secondary-foot"></section>
CSS：
section#secondary-foot { height: 100%; background-color: #000000; position: fixed; width: 100%; }
如果你的空间需要修正屏幕的边界，你可以尝试
做一个大的div ：
top:0; bottom:0; margin:0px auto;
并在里面做2 div与
height:50%; margin:0px auto;
这与thgaskell的方法非常相似，但它更灵活，并且符合CSS3。 您可以尝试进行合并并对其进行testing，以查看它是否适合您所需的所有方向和设备。
