最后一个div填充剩余高度

Question

I want to make the last div in my body to fill the remaining space but I'm having some trouble. 我想在body最后一个div填充剩余空间，但遇到了一些麻烦。 I have this HTML: 我有这个HTML：

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

and this CSS: 和这个CSS：

body, html {
    height: 100%;
}

.content {
  height: 100px;
  background-color: red;
}

.footer {
  height: 100%;
  background-color: #ccc;
}

Here is a JSFiddle . 这是一个JSFiddle 。

It's not working because a vertical scrollbar is appearing. 它不起作用，因为出现了垂直滚动条。

Any idea how I can do this? 知道我该怎么做吗？

Answer 1

You can make it a calculation: 您可以进行计算：

.footer {
  height: calc(100% - 100px);
}

Also, add this style: 另外，添加以下样式：

body,html {
  margin: 0px;
}

Working Fiddle #1 工作小提琴＃1

If the height of content is unknown, you can use a flexbox solution: 如果content的高度未知，则可以使用flexbox解决方案：

 body, html { height: 100%; width: 100%; margin: 0px; display: flex; flex-direction: column; } .footer { flex: 1; }

Working Fiddle #2 工作小提琴＃2

最后一个div填充剩余高度

问题描述

1 个解决方案

解决方案1
1 2015-03-10 22:25:24

最后一个div填充剩余高度

问题描述

1 个解决方案

解决方案1 1 2015-03-10 22:25:24

解决方案1
1 2015-03-10 22:25:24