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

或者这种方法错了吗？我该怎么做？请看我的 demo 并告诉我我的错误。

Answer 1

如果你添加一个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。如果#full成为弹性容器，则可以更改CSS，#someid应将其弹性增长设置为大于0的值。

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

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

#someid {
  flex-grow: 1;
}

Answer 2

要在页面上获得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的替代品。

Answer 3

这可以通过表格来完成：

<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＃2按照问题中的要求填充剩余的空间。如果您需要第二个div来填充分配给它的全部高度，这是目前唯一的方法。

但是当然可以随意证明我的错！ CSS总是更好。

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

Answer 5

我知道这是一个迟到的条目，但即使在2016年，我仍然感到惊讶的是完全缺乏对flex的IE支持（目前11是唯一一个支持它及其http://caniuse.com/#feat=flexbox的主要错误）商业角度不是很好！所以我认为在IE关闭之前最好的解决方案和大多数跨浏览器友好的一个肯定必须是JS / Jquery一个？

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

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

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

Answer 6

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

HTML：

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

的CSS：

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

Answer 7

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

高度：100vh;

应将包含div的高度（完整和某实体）设置为“自动”。就是这样。

Answer 8

我知道这是一个老问题，但是现在有一种超级简单的形式可以做到这一点，那就是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，同伴，将占据其余的高度由于属性为1fr，因此第一个div的最小值为100px，最大值为无论需要什么。

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

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

8 个答案: