如何填充剩余高度的100％？

78

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

还是这种方法错误？我应该怎么做？请看我的演示并告诉我我的错误。

— 博詹德拉·拉尼雅（Bhojendra Rauniyar）
source

您是否希望1 + 2的高度为视口的确切高度？或者2与视口大小相同，并且向下滚动等于高度1？

— thgaskell

我不知道1的高度，剩下的1再2就是全高。

— Bhojendra Rauniyar

@ C-Link是什么意思height:100%？您是说div应该占据剩余高度吗？

— Mr_Green 2013年

@Mr_Green是的！剩余高度。

— Bhojendra Rauniyar 2013年

@ C-Link页面的剩余高度还是页面内的剩余scrollheight？

— Mr_Green 2013年

62

如果在div中添加#header以下内容来包装1的内容，则应该可以执行此操作。

如果浮动#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;
}

— Thgaskell
source

请检举我的**演示并在错误的地方纠正它。

— Bhojendra Rauniyar 2013年

我认为您是对的，但我的问题无法解决，但是无论如何这帮助我了解了这一点。因此，我接受您的回答。

— Bhojendra Rauniyar 2013年

您的答案效果很好，但是我对它为什么起作用有些困惑：如果您使用背景色播放，尽管#someid高度为#full，您仍然可以看到它总是等于高度#header。从逻辑上讲，的内容#someid应从的顶部开始#full。为什么#header下推内容？

— 2015年

3

问题是它#someid的高度与相同#full，因此#someid溢出#full高度为#header。它没有设置#someid为剩余空间的100％。如果您设置overflow: scroll;，#someid您将看到问题。

— 老职业

3

是的，这个答案应该更新。这是在滥用这一浮动推送内容下来，这与不支持的东西像浏览器打交道时，在当时是一个“足够好”的事实，一个黑客calc和flexbox布局并没有得到广泛的支持。看看我们在不到三年的时间内走了多远！

— thgaskell 2015年

11

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

— Serdalis
source

您希望哪个元素的高度为100％？与什么有关？

— 塞达利斯

（2）高度应为100％。您的方法可以在没有包装器的情况下工作，但是我正在使用包装器。

— Bhojendra Rauniyar

如果您someid也想成为100％，则必须向其中添加100％，并将容器也设置为100％。我已编辑问题以显示此问题。

— 塞达利斯

我已经说过可能不起作用，因为我使用包装器，然后将其设置为100％也不起作用。

— Bhojendra Rauniyar

尝试我发布的示例，您可能只是在层次结构中遗漏了一些东西而已将其搞砸了。

— Serdalis 2013年

5

这可以通过表来完成：

<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总是更好。

— 乔纳森·格雷夫
source

4

    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>

展开摘要

— 埃内斯托·赫吉（Ernesto Hegi）
source

您能否详细说明这个仅代码的答案？谢谢！

— arkascha '16

您好@arkascha，我刚刚用一个工作代码示例更新了我的帖子。谢谢你的建议。干杯。

— Ernesto Hegi

1

我知道这是一个迟到的条目，但是即使在2016年，我也仍然对IE完全缺乏对flex的支持感到惊讶（目前11是唯一支持它的人，并且主要是在http://caniuse.com/#feat= flexbox）从业务角度来看不是很好！因此，我认为在IE关闭之前，最好的解决方案和对跨浏览器友好的解决方案一定是JS / Jquery之一吗？

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

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

您显然可以替换window和header，然后让基本数学完成工作。就我个人而言，我仍然不相信flex ...

— Ukuser32
source

0

我为太短的页面添加了此内容。

的HTML：

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

CSS：

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

— 用户4533280
source

我在@BhojendraNepal的JSFiddle中尝试了此方法，但无法使其正常工作。您可以在自己的JSFiddle中显示还是描述添加元素的位置？

— DagHøidahl'15

0

创建一个包含两个div（完整和someid）的div，并将该div的高度设置为以下值：

高度：100vh；

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

— 哈
source

0

我知道这是一个老问题，但是现在有一种超级简单的形式可以做到这一点，即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;
 }

就是这样，由于属性1fr，第二行scilicet（同伴）将占用其余的高度，而第一div的最小值为100px，最大值为所需值。

我必须说CSS取得了很大进步，使程序员的生活更加轻松。

— 胡安·乔亚（Juan Joya）
source