用ChatGPT解决这个技术问题 Extra ChatGPT

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

html css html-table

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

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

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

CSS 和 HTML

#page { 高度：100%;宽度：100% } #tdcontent { 高度：100%; } #content { 溢出：自动； /* 或溢出：隐藏； */ }

...

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

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

有没有办法在不使用table的情况下达到同样的效果？

更新：

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

更新 2：

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

对于将来遇到此问题的任何人，您可以通过使用 display:table 和相关属性在大多数浏览器中获得所需的表格布局，而无需表格标记，请参阅 this answer 以解决非常相似的问题。

我已尝试重新设置您的设置 - jsfiddle.net/ceELs - 但它不起作用，我错过了什么？

@先生。外星人的回答简单实用，看看http://stackoverflow.com/a/23323175/188784

实际上，即使使用表格，您所描述的也不起作用：如果内容占用的垂直空间大于屏幕高度，则表格单元格和整个表格将扩展超出屏幕底部。您的内容的溢出：自动不会使滚动条出现。

@GillBates 它会在你指定父元素的高度后工作看 jsfiddle.net/ceELs/5

SwDevMan81

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 shim。

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

工作示例

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

html, 身体 { 高度：100%;边距：0； } .box { 显示：弹性；弹性流：列；高度：100%； } .box .row { 边框：1px 虚线灰色； } .box .row.header { 弹性：0 1 自动； /* 以上是 flex-grow: 0, flex-shrink: 1, flex-basis: auto */ } .box .row.content { flex: 1 1 auto; } .box .row.footer { 弹性：0 1 40px; }

content（填充剩余空间)

在上面的 CSS 中，flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，以建立弹性项目的灵活性。 Mozilla 有一个 good introduction to the flexible boxes model。

为什么 box .row 中的 flex: 0 1 30px; 属性在每个 div 中都被覆盖？

这是 flexbox 的浏览器支持 - 很高兴看到所有绿色 - caniuse.com/#feat=flexbox

绝对这是一个非常好的方法，它几乎可以工作；）当 div.content 的内容超过原始的 flex-ed 高度时，会出现一个小问题。在当前的实现中，“页脚”将被推低，这不是开发人员所期望的；）所以我做了一个非常简单的修复。 jsfiddle.net/przemcio/xLhLuzf9/3 我在容器和溢出滚动上添加了额外的 flex。

具有透明度的导航栏不起作用。 rgba 中的 Alpha 通道完全没有效果，固定的页眉/页脚只能有纯色背景色。

所以要在 DOM 树中实现它，我需要将 height: 100% 从 body 到所有 div 设置为我需要的 div？

Igor

在 CSS 中确实没有一种可靠的、跨浏览器的方式来做到这一点。假设您的布局很复杂，您需要使用 JavaScript 来设置元素的高度。您需要做的事情的本质是：

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

一旦您可以获取此值并设置元素的高度，您需要将事件处理程序附加到窗口 onload 和 onresize 以便您可以触发您的调整大小功能。

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

这就是我所怀疑的。但是，该应用程序也可以在关闭 Javascript 的情况下工作，所以我想我会继续使用该表。

文森特，站稳脚跟的方式。我一直想做同样的事情，但用 css 似乎不可能？我不确定，但无论如何其他大量解决方案都没有按照您的描述进行。 javascript 是目前唯一可以正常工作的。

Cursor

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

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

以下是该帖子的一些片段：

@media screen { /* 屏幕规则开始。 */ /* 通用窗格规则 */ body { margin: 0 } .row, .col { overflow: hidden;位置：绝对； } .row { 左：0;右：0； } .col { 顶部：0；底部：0； } .scroll-x { 溢出-x：自动； } .scroll-y { 溢出-y：自动； } .header.row { 高度：75px;顶部：0； } .body.row { 顶部：75px;底部：50px； } .footer.row { 高度：50px;底部：0； } /* 屏幕结束规则。 */ }

正文

这只有一个问题：页眉和页脚不是自动调整大小的。那是真正的困难，这就是为什么“这不可能”的答案目前在顶部...

Ry-

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

标记

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

（相关）CSS

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

FIDDLE1 和 FIDDLE2

这种方法的一些优点是：

1) 少加价

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

3) 浏览器支持非常好：IE8+、所有现代浏览器和移动设备 (caniuse)

CSS 表格模型

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 }

Aleksandr Belugin

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

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

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

Demo

假定的标记和你的 CSS 应该是

html, 身体 { 高度：100%; } 标题 { 高度：100px;背景：灰色； } 部分 { 高度：计算 (100% - (100px + 150px)); /* 添加 100 像素的页眉和 150 像素的页脚 */ 背景：番茄； } 页脚 { 高度：150 像素；背景颜色：蓝色； }

100px

展开剩余空间

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

只需确保将 height: 100%; 用于父元素即可。

OP 说标题可以是任意高度。因此，如果您事先不知道高度，您将无法使用 calc :(

就我而言，height: calc( 100vh - ( 100px + 150px ) ); 效果很好。谢谢你的想法！

nguyên

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

代码：

.header { 高度：60px;顶部：0；背景颜色：绿色} .body { 高度：计算（100vh - 110px）； /*50+60*/ background-color: gray; } .footer { 高度：50px;底部：0； }

正文

Maharkus

一个简单的解决方案，使用 flexbox：

html, 身体 { 高度：100%; } 身体 { 显示：弹性；弹性方向：列； } .content { 弹性增长：1； }

header

Codepen sample

An alternate solution, with a div centered within the content div

Alireza

在 CSS 中使用代表 view height 的 vh 怎么样？

查看我在下面为您创建的代码片段并运行它：

身体{填充：0；边距：0； } .full-height { 宽度：100px;高度：100vh；背景：红色； }

另外，请看下面我为您创建的图像：

https://i.stack.imgur.com/Oy7mP.jpg

仅当您希望 div 跨越窗口的整个高度时，这才很好。现在在其上方放置一个高度未知的标题 div。

Aleksandr Belugin

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

.table { 显示：表格； } .table-row { 显示：表行； } .table-cell { 显示：表格单元； } .container { 宽度：400px;高度：300px； } .header { 背景：青色； } .body { 背景：黄色；高度：100%； } .body-content-outer-wrapper { 高度：100%; } .body-content-inner-wrapper { 高度：100%;位置：相对；溢出：自动； } .body-content { 位置：绝对；顶部：0；底部：0；左：0；右：0； }

这是高度未知的可滚动内容

div>

这是高度未知的可滚动内容

这是滚动条le 高度未知的内容

这是高度未知的可滚动内容

这是可滚动内容高度未知

这是高度未知的可滚动内容

这是高度未知的可滚动内容is unknown

这是高度未知的可滚动内容

Original source: Filling the Remaining Height of a Container While Handling Overflow in CSS

JSFiddle live preview

dev.meghraj

CSS3 简单方式

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

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

Ajithraj

它可以完全由 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

Michael P. Bazos

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

HTML 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 */
}

上面的解决方案使用 viewport units 和 flexbox，因此是 IE10+，提供您使用 IE10 的旧语法。

可使用的 Codepen：link to codepen

或者这个，对于那些需要在内容溢出时滚动主容器的人：link to codepen

主要{高度：10px；弹性：1；溢出：自动 }

TylerH

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

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

Joran Den Houting

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

padding-bottom: 100%;

100% 什么？如果我尝试这个，我会得到一个巨大的空白空间并开始滚动。

puiu

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

这样，我就不需要玩弄显示或定位了。这在使用 Bootstrap 制作仪表板时派上了用场，其中我有一个侧边栏和一个主栏。我希望主体能够拉伸并填充整个垂直空间，以便我可以应用背景颜色。

div {
    height: 100vh;
}

支持 IE9 及更高版本：click to see the link

但是 100vh 听起来像是所有的高度，而不是剩余的高度。如果你有一个标题，然后你想填充其余部分怎么办？

gadolf

在引导程序中：

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>

https://i.stack.imgur.com/3vE98m.png

2）填充剩余屏幕空间的高度并将内容对齐到父元素的中间：

<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>

https://i.stack.imgur.com/P9o0fm.png

Mikko Rantalainen

如果您可以处理不支持旧浏览器（即 MSIE 9 或更早版本）的问题，您可以使用已经是 W3C CR 的 Flexible Box Layout Module 来处理。该模块还允许其他一些不错的技巧，例如重新排序内容。

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

另一种选择是 CSS Grid Layout，但它对稳定版本的浏览器的支持更少。实际上，只有 MSIE 10 支持这一点。

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

使用 display: grid 的示例：

html, body { 最小高度: 100vh;填充：0；边距：0； } 身体 { 显示：网格； grid: "myheader" auto "mymain" minmax(0,1fr) "myfooter" auto / minmax(10rem, 90rem); } 标题 { 网格区域：我的标题；背景：黄色； } 主要 { 网格区域： mymain;背景：粉红色； align-self: center /* 或拉伸 + 显示: flex; + 弹性方向：列； + 对齐内容：居中； */ } 页脚 { 网格区域：myfooter;背景：青色； }

标题内容

应该居中的主要内容，内容长度可能会改变。

可折叠内容

这里有一些文字可以使用更多垂直空间。

这里有一些文字可以使用更多垂直空间（2）。< /p>

这里有一些文本会导致使用更多的垂直空间（3）。

这是一些文本会导致使用更多的垂直空间（4）。

这里有一些文本会导致使用更多的垂直空间 (5)。

使用 display: flex 的示例：

html, body { 最小高度: 100vh;填充：0；边距：0； } 身体 { 显示：弹性； } 主要 { 背景：粉红色；对齐自我：中心； }

应该居中的主要内容，内容长度可能会改变。

可折叠内容

这里有一些文字可以使用更多垂直空间。

这里有一些文字可以使用更多垂直空间（2）。< /p>

这里有一些文本会导致使用更多的垂直空间（3）。

这是一些文本会导致使用更多的垂直空间（4）。

这里有一些文本会导致使用更多的垂直空间 (5)。

你能添加一个使用 flexbox/grid 的例子吗？

我添加了同时使用 grid 和 flex 的示例。请注意，如果足以满足您的需要，display:flex 通常更易于使用。关于 display:grid 的好处是您可以使用逻辑网格区域名称并仅更改 grid 属性以根据需要切换布局，而无需重新排序元素顺序。请注意，Chrome 不支持 subgrid，如果您想要嵌套布局，这会使事情变得更容易。您应该根据可访问性需求对元素进行排序，而不是根据视觉顺序。

请注意，您可以在父元素中使用 align-items 或 align-content 而不是 align-self。如果内容包装，它们之间的区别与包装的项目有关。

Jerph

<!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- 不会正确解释高度，因此标题需要在内容中，如上所述。 overflow: auto 将导致 IE 上的双滚动条（它始终使视口滚动条可见，但已禁用），但没有它，如果内容溢出，内容将被剪辑。

Paulie_D

CSS Grid Solution

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

{边距：0；填充：0； } html { 高度：100%; } 身体 { 最小高度：100%;显示：网格；网格模板行：自动 1fr 自动； } 标题 { 填充：1em;背景：粉红色； } 主要 { 填充：1em;背景：浅蓝色； } 页脚 { 填充：2em;背景：浅绿色； } 主：悬停{高度：2000px； /* 演示中心元素的扩展 */ }

HEADER

MAIN

A Complete Guide to Grids @ CSS-Tricks.com

是的。它现在得到了广泛的支持，所以没有理由用另一种方式来做

demo

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

html { 高度：100%; } 身体 { 高度：100%;边距：0； } 部分 { 显示：弹性；弹性方向：列；高度：100%； } div:first-child { 背景：黄金； } div:last-child { 背景：李子；弹性增长：1； }

FIT

GROW

Joran Den Houting

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

由于很容易使内容 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%;
}

如果您不知道标题的高度怎么办？

Josh Crozier

为什么不只是这样？

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（按这个顺序）一个高度，然后给你的元素一个高度？

为我工作

Hemerson Varela

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

See this fiddle 以及以下代码：

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;
}

HTML：

<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>

Zohab Ali

 style="height:100vh"

为我解决了这个问题。就我而言，我将此应用于所需的 div

pascalhein

文森特，我会用你的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此您不需要浮动标题。只需将溢出隐藏在 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>

Saurin Dashadia

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

<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/

Marc Audet

尝试这个

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

Anthony Brenelière

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

具有固定大小元素的标题

页脚

带有占据剩余高度的滚动条的侧边栏

内容

我使用了 flexbox，但以更简单的方式，仅使用属性 display: flex 和 flex-direction: row|column:

我确实使用 angular 并且我希望我的组件大小是其父元素的 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>

Zub

分拆外星人先生的想法...

对于支持 CSS3 的浏览器，这似乎比流行的 flex box 更简洁。

只需将 min-height（而不是 height）与 calc() 一起用于内容块。

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

使用“min-height”而不是“height”特别有用，因此它可以与 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));
}

当然，数学可以简化，但你明白了......

htho

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

关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

相似问题

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com