html - 如何填充 100% 的剩余高度？

Question

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

上图（1）的内容是未知的，因为它可能在动态生成的页面中增加或减少。如上图所示的第二个 div (2) 应填充剩余空间。

这是我的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%;}

或者这种方法是错误的？我该怎么做？请查看我的演示并向我展示我的错误。

score 65 · Accepted Answer

#header如果您添加一个 div （如下）来包装您的 1 的内容，您应该能够做到这一点。

如果你 float #header，来自的内容#someid将被迫在它周围流动。
接下来，将#header的宽度设置为 100%。这将使其扩展以填充包含 div 的宽度#full。这将有效地将所有#someid的内容推到下面，#header因为没有空间可以在两侧流动了。
最后，将#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为一个 flex 容器，并且#someid应该将它的 flex 增长设置为大于0.

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

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

#someid {
  flex-grow: 1;
}

score 14 · Accepted Answer

要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 的替代品。

score 6 · Accepted Answer

    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>

score 5 · Accepted Answer

这可以通过表格来完成：

<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 成为页面的整个高度之外什么都不做，这个解决方案使 div #2 填充问题中要求的剩余空间。如果您需要第二个 div 来填充分配给它的完整高度，这是目前唯一的方法。

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

score 1 · Accepted Answer

我知道这是一个较晚的条目，但即使在 2016 年，我也对完全缺乏 IE 对 flex 的支持感到惊讶（目前 11 是唯一支持它的，而且它在http://caniuse.com/#feat= flexbox）从商业角度来看并不是很好！所以我认为在 IE 关闭之前，最好的解决方案和最适合跨浏览器的解决方案肯定是 JS/Jquery 解决方案？

大多数网站已经使用 Jquery，一个非常简单的例子（对于我的代码）是：

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

您显然可以替换窗口和标题，让基本数学来完成工作。就我个人而言，我仍然不相信 flex...

score 1 · Accepted Answer

我知道这是一个老问题，但现在有一种超级简单的形式可以做到这一点，那就是 CCS Grid，所以让我以 div 为例：

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

然后是CSS代码：

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

就是这样，第二行，scilicet，someide，由于属性 1fr，将占据其余的高度，第一个 div 的最小值为 100px，最大值为它需要的任何值。

我必须说 CSS 已经进步了很多，让程序员的生活更轻松。

score 0 · Accepted Answer

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

html:

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

CSS：

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

score 0 · Accepted Answer

创建一个 div，其中包含两个 div（full 和 someid）并将该 div 的高度设置为以下内容：

高度：100vh；

包含 div（full 和 someid）的高度应设置为“auto”。就这样。

html - 如何填充 100% 的剩余高度？

8 回答 8

Related

Reference