创建一个div填充剩余屏幕空间的高度

我正在开发一个Web应用程序，我希望内容填满整个屏幕的高度。

该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。

我有一个标题div和一个内容div。目前我正在使用一个表格进行布局，如下所示：

CSS和超文本标记语言

#page {height: 100%; width: 100%}
#tdcontent {height: 100%;}
#content {overflow: auto; /* or overflow: hidden; */}
<table id="page"><tr><td id="tdheader"><div id="header">...</div></td></tr><tr><td id="tdcontent"><div id="content">...</div></td></tr></table>

页面的整个高度被填满，不需要滚动。

对于内容div中的任何内容，设置top: 0;将把它放在标题的正下方。有时内容将是一个真实的表格，其高度设置为100%。将header放在content内将不允许此操作。

有没有一种方法可以在不使用table的情况下达到同样的效果？

更新时间：

内容div中的元素也将高度设置为百分比。因此，div中100%的内容将填充到底部。50%的两个元素也是如此。

更新2：

例如，如果标题占用屏幕高度的20%，那么在#content中指定为50%的表格将占用40%的屏幕空间。到目前为止，将整个东西包装在表格中是唯一有效的方法。

1604459 次浏览
小开 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><style type="text/css">body,html{height: 100%;margin: 0;padding: 0;color: #FFF;}
#header{float: left;width: 100%;background: red;}
#content{height: 100%;overflow: auto;background: blue;}
</style></head><body>
<div id="content"><div id="header">Header<p>Header stuff</p></div>Content<p>Content stuff</p></div>
</body></html>

在所有正常的浏览器中，您可以将“标题”div放在内容之前，作为兄弟姐妹，并且相同的CSS将起作用。然而，如果在这种情况下浮点数为100%，IE7-不会正确解释高度，因此标题需要在内容中，如上所述。溢出：自动将导致IE上的双滚动条（始终可见视口滚动条，但禁用），但没有它，如果它溢出，内容将被剪辑。

小开

在CSS中真的没有一种声音、跨浏览器的方式来做到这一点。假设你的布局很复杂，你需要使用JavaScript来设置元素的高度。你需要做的本质是：

Element Height = Viewport height - element.offset.top - desired bottom margin

获取此值并设置元素的高度后，您需要将事件处理程序附加到窗口onload和onresize，以便您可以触发resize函数。

此外，假设您的内容可能大于视口，您需要将overflow-y设置为滚动。

小开

Vincent，我会使用你的新要求再次回答。既然过长你不关心内容被隐藏，所以不需要浮动标题。只需在html和body标签上隐藏溢出，并将#content高度设置为100%。内容始终会比视口长，但会被隐藏，不会导致滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test</title><style type="text/css">body, html {height: 100%;margin: 0;padding: 0;overflow: hidden;color: #FFF;}p {margin: 0;}
#header {background: red;}
#content {position: relative;height: 100%;background: blue;}
#content #positioned {position: absolute;top: 0;right: 0;}</style></head>
<body><div id="header">Header<p>Header stuff</p></div>
<div id="content">Content<p>Content stuff</p><div id="positioned">Positioned Content</div></div>
</body></html>
小开

我也一直在寻找这个问题的答案。如果您有幸能够以IE8及更高版本为目标，您可以使用display:table和相关值来获取包含div在内的块级元素的表的呈现规则。

如果您更幸运，并且您的用户正在使用顶级层浏览器（例如，如果这是您控制的计算机上的Intranet应用程序，就像我的最新项目一样），您可以使用CSS3中的新灵活的盒子布局！

小开

我为此挣扎了一段时间，最终得到了以下结果：

由于使内容DIV与父级相同的高度很容易，但显然很难使其成为父级高度减去标题高度，我决定使内容div全高，但将其绝对定位在左上角，然后为顶部定义一个具有标题高度的填充。这样内容就会整齐地显示在标题下并填充整个剩余空间：

body {padding: 0;margin: 0;height: 100%;overflow: hidden;}
#header {position: absolute;top: 0;left: 0;height: 50px;}
#content {position: absolute;top: 0;left: 0;padding-top: 50px;height: 100%;}
小开

它从来没有用其他方式为我工作，然后使用JavaScript正如NICCAI在第一个答案中建议的那样。我正在使用这种方法用谷歌地图重新调整<div>。

以下是如何做到这一点的完整示例（适用于Safari /FireFox/IE/iPhone /Andorid（适用于旋转））：

css

body {height: 100%;margin: 0;padding: 0;}
.header {height: 100px;background-color: red;}
.content {height: 100%;background-color: green;}

JS

function resize() {// Get elements and necessary element heightsvar contentDiv = document.getElementById("contentId");var headerDiv = document.getElementById("headerId");var headerHeight = headerDiv.offsetHeight;
// Get view heightvar viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area// in browser windowcontentDiv.style.height = viewportHeight - headerHeight;}
window.onload = resize;window.onresize = resize;

超文本标记语言

<body><div class="header" id="headerId">Hello</div><div class="content" id="contentId"></div></body>
小开

对我有效的方法（在另一个div中有一个div，我假设在所有其他情况下）是将底部填充设置为100%。也就是说，将此添加到您的css/样式表中：

padding-bottom: 100%;
小开

最初的帖子是3年多前的。我猜很多像我一样来这篇文章的人都在寻找一个类似应用程序的布局解决方案，比如说一个以某种方式固定的页眉、页脚和占据其余屏幕的全高度内容。如果是这样，这篇文章可能会有所帮助，它适用于IE7+等。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

以下是这篇文章的一些片段：

@media screen {  
/* start of screen rules. */  
/* Generic pane rules */body { margin: 0 }.row, .col { overflow: hidden; position: absolute; }.row { left: 0; right: 0; }.col { top: 0; bottom: 0; }.scroll-x { overflow-x: auto; }.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }.body.row { top: 75px; bottom: 50px; }.footer.row { height: 50px; bottom: 0; }  
/* end of screen rules. */}
<div class="header row" style="background:yellow;"><h2>My header</h2></div><div class="body row scroll-y" style="background:lightblue;"><p>The body</p></div><div class="footer row" style="background:#e9e9e9;">My footer</div>

小开

为什么不就像这样？

html, body {height: 100%;}
#containerInput {background-image: url('../img/edit_bg.jpg');height: 40%;}
#containerControl {background-image: url('../img/control_bg.jpg');height: 60%;}

给你html和body（按此顺序）一个高度，然后只给你的元素一个高度？

对我有用

小开

我找到了一个非常简单的解决方案，因为对我来说这只是一个设计问题。我希望页面的其余部分在红色页脚下方不是白色的。所以我设置页面背景颜色为红色。内容背景颜色为白色。内容高度设置为例如。20em或50%几乎是空的页面不会让整个页面变成红色。

小开

试试这个

var sizeFooter = function(){$(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())}$(window).resize(sizeFooter);
小开

如果您可以处理不支持旧浏览器（即MSIE 9或更早版本）的问题，您可以使用已经是W3C CR的柔性盒子布局模块来做到这一点。该模块还允许其他不错的技巧，例如重新排序内容。

不幸的是，MSIE 9或更低版本不支持此功能，您必须为Firefox以外的每个浏览器的CSS属性使用供应商前缀。希望其他供应商也能很快放弃前缀。

另一个选择是CSS网格布局，但它对稳定版本浏览器的支持更少。在实践中，只有MSIE 10支持这一点。

更新年份2020：所有现代浏览器都支持display: flex和display: grid。唯一缺少的是对subgrid的支持，它只受Firefox支持。请注意，MSIE不支持这两个规范，但如果你愿意添加MSIE特定的CSS黑客，它可以表现得很好。我建议干脆忽略MSIE，因为即使是微软也表示不应该再使用它了。Microsoft Edge很好地支持这些功能（除了子网格支持，因为它与Chrome共享Blink渲染引擎）。

使用display: grid的示例：

html, body{min-height: 100vh;padding: 0;margin: 0;}
body{display: grid;grid:"myheader" auto"mymain" minmax(0,1fr)"myfooter" auto /minmax(10rem, 90rem);}
header{grid-area: myheader;background: yellow;}
main{grid-area: mymain;background: pink;align-self: center/* or stretch+ display: flex;+ flex-direction: column;+ justify-content: center; */}
footer{grid-area: myfooter;background: cyan;}
<header>Header content</header><main>Main content which should be centered and the content length may change.<details><summary>Collapsible content</summary><p>Here's some text to cause more vertical space to be used.</p><p>Here's some text to cause more vertical space to be used (2).</p><p>Here's some text to cause more vertical space to be used (3).</p><p>Here's some text to cause more vertical space to be used (4).</p><p>Here's some text to cause more vertical space to be used (5).</p></details></main><footer>Footer content</footer>

使用display: flex的示例：

html, body{min-height: 100vh;padding: 0;margin: 0;}
body{display: flex;}
main{background: pink;align-self: center;}
<main>Main content which should be centered and the content length may change.<details><summary>Collapsible content</summary><p>Here's some text to cause more vertical space to be used.</p><p>Here's some text to cause more vertical space to be used (2).</p><p>Here's some text to cause more vertical space to be used (3).</p><p>Here's some text to cause more vertical space to be used (4).</p><p>Here's some text to cause more vertical space to be used (5).</p></details></main>

小开

您可以使用CSS表格，而不是在标记中使用表格。

置标

<body><div>hello </div><div>there</div></body>

（相关）CSS

body{display:table;width:100%;}div{display:table-row;}div+ div{height:100%;}

小提琴1和FIDDLE2

这种方法的一些优点是：

1）更少的标记

2）标记比表格更具语义，因为这不是表格数据。

3）浏览器支持很好：IE8+，所有现代浏览器和移动设备（caniuse）

为了完整起见，以下是CSS表模型

中与css属性等效的Html元素 
table    { display: table }tr       { display: table-row }thead    { display: table-header-group }tbody    { display: table-row-group }tfoot    { display: table-footer-group }col      { display: table-column }colgroup { display: table-column-group }td, th   { display: table-cell }caption  { display: table-caption }
小开

您实际上可以使用display: table将区域拆分为两个元素（标题和内容），其中标题的高度可以变化，内容填充剩余的空间。这适用于整个页面，以及当区域只是定位为position设置为relative、absolute或fixed的另一个元素的内容时。只要父元素的高度不为零，它就会起作用。

看这小提琴以及下面的代码：

css：

body, html {height: 100%;margin: 0;padding: 0;}
p {margin: 0;padding: 0;}
.additional-padding {height: 50px;background-color: #DE9;}
.as-table {display: table;height: 100%;width: 100%;}
.as-table-row {display: table-row;height: 100%;}
#content {width: 100%;height: 100%;background-color: #33DD44;}

超文本标记语言：

<div class="as-table"><div id="header"><p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p><div class="additional-padding"></div></div><div class="as-table-row"><div id="content"><p>This is the actual content that takes the rest of the available space.</p></div></div></div>
小开

仅限CSS方法（如果高度已知/固定）

当您希望中间元素垂直跨越整个页面时，您可以使用CSS3中引入的#0。

假设我们有一个固定高度header和footer元素，我们希望section标签占用整个可用的垂直高度…

演示

假设置标和您的CSS应该是

html,body {height: 100%;}
header {height: 100px;background: grey;}
section {height: calc(100% - (100px + 150px));/* Adding 100px of header and 150px of footer */background: tomato;}
footer {height: 150px;background-color: blue;}
<header>100px</header><section>Expand me for remaining space</section><footer>150px</footer>

所以在这里，我所做的是，将元素的高度相加，然后使用calc()函数从100%中扣除。

只需确保对父元素使用height: 100%;。

小开
最佳答案

2015年更新：flexbox方法

还有另外两个答案简要提到了flexbox；然而，那是两年多前的事了，他们没有提供任何示例。flexbox的规范现在已经确定了。

注意：虽然CSS弹性框布局规范处于候选推荐阶段，但并非所有浏览器都实现了它。WebKit实现必须以-webkit-为前缀；Internet Explorer实现了旧版本的规范，以-ms-为前缀；Opera 12.10实现了最新版本的规范，无前缀。有关最新的兼容性状态，请参阅每个属性的兼容性表。

（摘自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）

所有主流浏览器和IE11+都支持Flexbox。对于IE 10或更早版本，您可以使用FlexieJS垫片。

要查看当前支持，您还可以在此处查看：http://caniuse.com/#feat=flexbox

工作示例

使用flexbox，您可以轻松地在具有固定尺寸、内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将标题设置为捕捉到其内容（根据OPs问题），我已添加一个页脚以显示如何添加固定高度区域，然后设置内容区域以填充剩余空间。

html,body {height: 100%;margin: 0;}
.box {display: flex;flex-flow: column;height: 100%;}
.box .row {border: 1px dotted grey;}
.box .row.header {flex: 0 1 auto;/* The above is shorthand for:flex-grow: 0,flex-shrink: 1,flex-basis: auto*/}
.box .row.content {flex: 1 1 auto;}
.box .row.footer {flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"><div class="row header"><p><b>header</b><br /><br />(sized to content)</p></div><div class="row content"><p><b>content</b>(fills remaining space)</p></div><div class="row footer"><p><b>footer</b> (fixed height)</p></div></div>

在上面的CSS中，flex属性缩短了柔性生长、弹性收缩和弹性基础属性，以建立flex项目的灵活性。Mozilla有一个对柔性盒子模型的良好介绍。

小开

它可以通过CSS使用vh来完成：

#page {display:block;width:100%;height:95vh !important;overflow:hidden;}
#tdcontent {float:left;width:100%;display:block;}
#content {float:left;width:100%;height:100%;display:block;overflow:scroll;}

和HTML

<div id="page">
<div id="tdcontent"></div><div id="content"></div>
</div>

我检查了一下，它适用于所有主要浏览器：Chrome、IE和FireFox

小开

当内容太高时需要底部div滚动时，发布的解决方案都不起作用。这是一个在这种情况下有效的解决方案：

.table {display: table;}
.table-row {display: table-row;}
.table-cell {display: table-cell;}
.container {width: 400px;height: 300px;}
.header {background: cyan;}
.body {background: yellow;height: 100%;}
.body-content-outer-wrapper {height: 100%;}
.body-content-inner-wrapper {height: 100%;position: relative;overflow: auto;}
.body-content {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
<div class="table container"><div class="table-row header"><div>This is the header whose height is unknown</div><div>This is the header whose height is unknown</div><div>This is the header whose height is unknown</div></div><div class="table-row body"><div class="table-cell body-content-outer-wrapper"><div class="body-content-inner-wrapper"><div class="body-content"><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div><div>This is the scrollable content whose height is unknown</div></div></div></div></div></div>

原始来源：在CSS中处理溢出时填充容器的剩余高度

JSFiddle实时预览

小开

使用flexbox的简单解决方案：

html,body {height: 100%;}
body {display: flex;flex-direction: column;}
.content {flex-grow: 1;}
<body><div>header</div><div class="content"></div></body>

代码样本

一个备用解决方案，其中一个div位于内容div的中心

小开

CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

现在所有主流浏览器都支持它，所以如果你不需要支持老式浏览器，请继续。

小开

现在有很多答案，但我发现使用height: 100vh;来处理需要填满整个可用垂直空间的div元素。

通过这种方式，我不需要摆弄显示或定位。这在使用Bootstrap制作仪表板时派上了用场，其中我有一个侧边栏和一个主。我希望主扩展并填充整个垂直空间，以便我可以应用背景颜色。

div {height: 100vh;}

支持IE9及以上：点击查看链接

小开

免责声明：接受的答案给出了解决方案的想法，但我发现它有点臃肿，有一个不必要的包装器和css规则。下面是一个只有很少css规则的解决方案。

超文本标记语言5

<body><header>Header with an arbitrary height</header><main>This container will grow so as to take the remaining height</main></body>

css

body {display: flex;flex-direction: column;min-height: 100vh;       /* body takes whole viewport's height */}
main {flex: 1;                 /* this will make the container take the free space */}

上面的解决方案使用视口单元和flexbox，因此是IE10+，前提是您使用IE10的旧语法。

使用的代码本：链接到代码本

或者这个，对于那些需要主容器在内容溢出的情况下可滚动的人：链接到coDepen

小开

使用：height: calc(100vh - 110px);

代码：

.header { height: 60px; top: 0; background-color: green}.body {height: calc(100vh - 110px); /*50+60*/background-color: gray;}.footer { height: 50px; bottom: 0; }
<div class="header"><h2>My header</h2></div><div class="body"><p>The body</p></div><div class="footer">My footer</div>

小开

关于外星人先生的想法…

对于支持CSS3的浏览器，这似乎是一个比流行的flex box更干净的解决方案。

只需在内容块的calc（）中使用min-的高度（而不是高度）。

calc（）从100%开始，减去页眉和页脚的高度（需要包括填充值）

使用“min-高度”而不是“高度”特别有用，因此它可以与javascript渲染的内容和Angular2等JS框架一起使用。否则，一旦javascript渲染的内容可见，计算将不会将页脚推送到页面底部。

这是一个简单的例子，页眉和页脚都使用50px高度和20px填充。

HTML：

<body><header></header><div class="content"></div><footer></footer></body>

css：

.content {min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));}

当然，数学可以简化，但你得到的想法…

小开

我遇到了同样的问题，但我无法使用上面的flexbox解决方案。所以我创建了自己的模板，其中包括：

  • 具有固定大小元素的标题
  • 一个页脚
  • 带有占据剩余高度的滚动条的侧栏
  • 内容

我使用了flexbox，但使用的方式更简单，只使用属性显示：flex和flex-方向：行|列：

我确实使用角度，我希望我的组件大小是其父元素的100%。

关键是为所有父级设置大小（以百分比为单位）以限制其大小。在以下示例中，myapp高度具有100%的视口。

主组件有90%的视口，因为页眉和页脚有5%。

我在这里发布了我的模板：https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{margin: 0;color: white;height: 100%;}div#myapp{display: flex;flex-direction: column;background-color: red; /* <-- painful color for your eyes ! */height: 100%; /* <-- if you remove this line, myapp has no limited height */}div#main /* parent div for sidebar and content */{display: flex;width: 100%;height: 90%;}div#header {background-color: #333;height: 5%;}div#footer {background-color: #222;height: 5%;}div#sidebar {background-color: #666;width: 20%;overflow-y: auto;}div#content {background-color: #888;width: 80%;overflow-y: auto;}div.fized_size_element {background-color: #AAA;display: block;width: 100px;height: 50px;margin: 5px;}

HTML：

<body><div id="myapp"><div id="header">HEADER<div class="fized_size_element"></div>
</div><div id="main"><div id="sidebar">SIDEBAR<div class="fized_size_element"></div><div class="fized_size_element"></div><div class="fized_size_element"></div><div class="fized_size_element"></div><div class="fized_size_element"></div><div class="fized_size_element"></div><div class="fized_size_element"></div><div class="fized_size_element"></div></div><div id="content">CONTENT</div></div><div id="footer">FOOTER</div></div></body>
小开

它是动态计算提醒屏幕空间，更好地使用Javascript。

您可以使用CSS-IN-JS技术，如下lib：

演示：https://cssobj.github.io/cssobj-demo/

小开

对于移动应用程序，我只使用VH和大众

<div class="container"><div class="title">Title</div><div class="content">Content</div><div class="footer">Footer</div></div>
.container {width: 100vw;height: 100vh;font-size: 5vh;}    
.title {height: 20vh;background-color: red;}    
.content {height: 60vh;background: blue;}    
.footer {height: 20vh;background: green;}

演示-https://jsfiddle.net/u763ck92/

小开

你简单地使用vh怎么样，它代表css中的view height…

看看下面我为你创建的代码段并运行它：

body {padding: 0;margin: 0;}
.full-height {width: 100px;height: 100vh;background: red;}
<div class="full-height"></div>

另外，看看下面我为你创建的图片：

制作一个div填充剩余屏幕空间的高度

小开

CSS网格解决方案

只需使用display:grid定义body，使用auto和fr值属性定义grid-template-rows。

* {margin: 0;padding: 0;}
html {height: 100%;}
body {min-height: 100%;display: grid;grid-template-rows: auto 1fr auto;}
header {padding: 1em;background: pink;}
main {padding: 1em;background: lightblue;}
footer {padding: 2em;background: lightgreen;}
main:hover {height: 2000px;/* demos expansion of center element */}
<header>HEADER</header><main>MAIN</main><footer>FOOTER</footer>

网格完整指南@CSS-Tricks.com

小开 
 style="height:100vh"

为我解决了这个问题。在我的案例中，我将其应用于所需的div

小开

在Bootstrap中：

CSS样式：

html, body {height: 100%;}

1）只需填充剩余屏幕空间的高度：

<body class="d-flex flex-column"><div class="d-flex flex-column flex-grow-1">
<header>Header</header><div>Content</div><footer class="mt-auto">Footer</footer>
</div></body>

！</a></p><hr /><p><em>2）填充剩余屏幕空间的高度并将内容对齐到父元素的中间：</em></p><pre><code><body class="d-flex flex-column"><div class="d-flex flex-column flex-grow-1"> <header>Header</header><div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div><footer class="mt-auto">Footer</footer> </div></body></code></pre><p><a href=！</a></p></div> </div> </div> </div> </div> <div class=

小开

这是我自己的Pebbl解决方案的最小版本。花了很长时间才找到让它在IE11中工作的诀窍。（也在Chrome、Firefox、Edge和Safari中进行了测试。）

html {height: 100%;}
body {height: 100%;margin: 0;}
section {display: flex;flex-direction: column;height: 100%;}
div:first-child {background: gold;}
div:last-child {background: plum;flex-grow: 1;}
<body><section><div>FIT</div><div>GROW</div></section></body>

小开

使用CSS网格的另一种解决方案

定义网格

.root {display: grid;grid-template-rows: minmax(60px, auto) minmax(0, 100%);}

第一行（标题）：可以设置最小高度，最大高度将取决于内容。第二行（内容）将尝试适应标题后留下的可用空间。

这种方法的优点是内容可以独立于标题滚动，因此标题始终位于页面顶部

body, html {margin: 0;height: 100%;}
.root {display: grid;grid-template-rows: minmax(60px, auto) minmax(0, 100%);height: 100%;}
.header {background-color: lightblue;}
button {background-color: darkslateblue;color: white;padding: 10px 50px;margin: 10px 30px;border-radius: 15px;border: none;}
.content {background-color: antiquewhite;overflow: auto;}
.block {width: calc(100% - 20px);height: 120px;border: solid aquamarine;margin: 10px;}
<div class="root"><div class="header"><button>click</button><button>click</button><button>click</button><button>click</button><button>click</button></div><div class="content"><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div></div><div class="footer"></div></div>

小开

如果您在父div上使用的是显示：flex，您所要做的就是简单地设置高度以像这样拉伸或填充

.divName {height: stretch}
小开

这里有一个使用网格的答案。

.the-container-div {display: grid;grid-template-columns: 1fr;grid-template-rows: auto min-content;height: 100vh;}.view-to-remain-small {grid-row: 2;}
.view-to-be-stretched {grid-row: 1}
小开

我的一些组件是动态加载的，这给我设置导航栏的高度带来了问题。

我所做的是使用Resize观察者API。

function observeMainResize(){const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {$("nav").height(Math.max($("main").height(),$("nav") .height()));}});resizeObserver.observe(document.querySelector('main'));}

然后：

...<body onload="observeMainResize()"><nav>...</nav><main>...</main>...
小开

一个不错的方法是将css边缘属性设置为“自动”。这将使div占用所有剩余的高度和宽度。

缺点是它将被计算为保证金而不是内容。

见附件截图：

beFore1beFore2

之后1

后2

小开

考虑将所有的“位置”设置为“固定”，然后使用{top： 0；底部： 0；}

<!DOCTYPE html><html><head><style>#B {position:fixed;width: 100%;height: 100%;background-color: orange;}#B1 {position:fixed;top:0;bottom: 0;width: 100%;background-color: cyan;}#B2 {position:fixed;bottom: 0;height: 35px;width: 100%;background: green;}
}</style></head><body><div id="B1">B1</div><div id="B2">B2</div></body></html>

注意有一些重叠，所以要小心。

如果要垂直占用父

的可用空间，请改用绝对定位。

小开

高度：calc（100%-650px）；位置：绝对；

小开

对我来说，最简单的方法是使用Grid。但是，我正在寻找一种更简单的方法。这是我的做法，它是有效的。但是，如果我们有很多嵌套的div，它会变得太痛苦。

 <div style=\{\{display:grid,gridTemplateRows:'max-content 1fr',}}><div>Header</div><div style=\{\{height:'100%',minHeight:'0'}}>Content</div></div>

提交答案