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

1906

我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。

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

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

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>
展开摘要

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

对于content div中的任何内容，设置top: 0;将其放在标题的正下方。有时，内容将是一个实际表，其高度设置为100％。把header里面content不会让这种工作。

有没有一种方法可以在不使用的情况下达到相同的效果table？

更新：

内容内的元素的div高度也将设置为百分比。因此，内部100％的内容div将填充到底部。两个元素占50％。

更新2：

例如，如果标题占据屏幕高度的20％，则内部指定为50％的表#content将占据屏幕空间的40％。到目前为止，将整个内容包装在表中是唯一有效的方法。

html  css  html-table 
— 文森特·麦克纳伯
source
31
对于将来在这里绊脚的任何人，您都可以通过使用display:table和相关属性，在大多数浏览器中获得所需的表布局，而无需使用表标记，请参见类似问题的答案。
— AmeliaBR 2014年
3
我试图取消您的设置-jsfiddle.net/ceELs-但无法正常工作，我错过了什么？
— Gill Bates
5
@先生。外星人的答案很简单而且有用，请查看http://stackoverflow.com/a/23323175/188784
— Gohan
4
实际上，即使对于表格，您所描述的内容也不起作用：如果内容所占用的垂直空间大于屏幕高度，则表格单元格和整个表格将超出屏幕底部。您的内容溢出：自动将不会显示滚动条。
— Damien 2014年
@GillBates在您指定父元素的高度后将起作用，请参见jsfiddle.net/ceELs/5
— MichalVašut2014年

Answers:

1108

2015年更新：Flexbox方法

还有两个简短提及flexbox的答案；但是，那是两年多以前的事了，他们没有提供任何示例。flexbox的规范现在已经确定。

注意：尽管CSS Flexible Boxes Layout规范处于“候选推荐”阶段，但并非所有浏览器都已实现。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填充程序。

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

工作实例

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

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>
展开摘要

在上面的CSS中，flex属性是flex-grow，flex-shrink和flex-basis属性的缩写，可以建立flex项目的灵活性。Mozilla 很好地介绍了弹性盒模型。

— Pebbl
source
9
为什么每个div中的flex: 0 1 30px;属性都box .row被覆盖？
— Erdal G.
11
这是flexbox的浏览器支持-很高兴看到所有绿色-caniuse.com/#feat=flexbox
— Brian Burns
1
指向Flexie.js的链接已失效。这是github项目github.com/doctyper/flexie
— ses3ion
52
绝对是一个非常好的方法，它几乎可以工作；）当div.content的内容超过原始的可伸缩高度时，存在一个小问题。在当前的实现中，“页脚”将降低，这不是开发人员所期望的；）因此，我进行了非常简单的修复。jsfiddle.net/przemcio/xLhLuzf9/3我在容器上添加了额外的伸缩性并溢出了滚动。
— przemcio '16
12
@przemcio好听点，但我不认为有滚动的内容是每一个开发商所期待的） -你应该只需要添加overflow-y: auto到.row.content以达到你所需要的不过。
— Pebbl '16
226

在CSS中，确实没有声音，跨浏览器的方式可以做到这一点。假设布局复杂，则需要使用JavaScript设置元素的高度。您需要做的实质是：

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

一旦获得此值并设置元素的高度，就需要将事件处理程序附加到窗口onload和onresize上，以便可以激发您的resize函数。

另外，假设您的内容可能大于视口，则需要设置溢出y来滚动。

— 尼卡
source
2
这就是我所怀疑的。但是，该应用程序也可以在关闭Javascript的情况下工作，因此我想我将继续使用该表。
— Vincent McNabb
6
文森特，坚持自己的立场。我一直在寻找做完全相同的事情，似乎不可能用CSS？我不确定，但是无论其他解决方案中有没有一个能满足您的描述。javascript是目前唯一可以正常工作的脚本。
— 特拉维斯2010年
5
如果窗高改变怎么办
— Techsin
4
我的意思是……为什么我们在2013年不使用calc？
— 卡米2014年
4
高度：calc（100vh-400px）; 是一种有效的CSS样式，完全可以满足本文的目的。所有其他解决方案都依赖于具有固定的父高度或块显示。
— WilliamX
167

最初的帖子已经超过3年了。我猜想像我这样来此帖子的很多人都在寻找类似应用程序的布局解决方案，比如说固定的页眉，页脚和全高内容占据了其余屏幕。如果是这样，这篇文章可能会有所帮助，它适用于IE7 +等。

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

以下是该帖子的一些摘要：

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>
展开摘要

— -
source
74
这样做只有一个问题：页眉和页脚不会自动调整大小。那才是真正的困难，这就是为什么“这不可能”的答案当前
— 居于
我需要一个55px的标题和一个div来填充文档其余部分的高度。这是解决方案！
— 马蒂亚斯·卡内帕
您是炸弹，我已经尝试了很久了，这是我找到的唯一解决方案。我需要将nav元素的顶部高度设置为60px，其余部分跨度为100％，此问题得以解决。
— 亚当·怀特
除非我有一个小问题，否则此方法效果很好-如果我display: table在体内添加元素，似乎会使身体溢出。因此，这样height: 100%做不会产生正确的高度。
— GSTAR
4
.col不使用，是吗？
— slartidan 2015年
143

您可以使用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表格模型的 css属性的等效Html元素

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 }
— 丹尼尔
source
3
我只是指出了css表的技术。原来答案已经在这个回答的问题中了。这是在最好的解决方案; 干净，优雅，并以正确的方式使用精确的工具。CSS表格
— Ian Boyd
小提琴代码与此处的答案不太匹配。html, body { height: 100%, width: 100% }在我的测试中，添加似乎很关键。
— mlibby
8
CSS表的烦人功能与普通表完全相同：如果内容太大，它们将扩展单元格以适合。这意味着，如果页面是动态的，您可能仍然需要限制大小（最大高度），或者设置代码的高度。我真的很想念Silverlight网格！:(
— Gone Coding
3
您始终可以在表格行元素内添加一个绝对定位的容器，然后将其宽度和高度设置为100％。请记住，还要在table-row元素上将位置设置为相对。
— Mike Mellor
1
@MikeMellor在IE11中不起作用，因为它似乎忽略relative了table-row元素上的定位，因此占用了不是表元素的第一位上升点的高度。
— 居住
95

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

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

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

演示版

假设标记和CSS应该是

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
展开摘要

因此，在这里，要做的是增加元素的高度，而不是从100%使用calc()函数中扣除。

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

— 外星人先生
source
13
OP表示标头可以是任意高度。因此，如果您事先不知道高度，将无法使用calc :(
— Danield 2014年
1
@Danield这就是为什么我提到固定高度的原因：）
— Alien先生
3
这是对我有用的解决方案，不需要我重新设计围绕flexbox的现有页面。如果您使用的是LESS，即Bootstrap，请确保并阅读coderwall上有关如何转义calc（）函数的文章，以便LESS不处理它。
— jlyonsmith
1
Op说“这可以是任意高度”。由设计师决定的任意手段，因此已确定。迄今为止，这种解决方案是最好的。
— jck
57

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

码： 

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>
展开摘要

— 阮
source
1
我认为这是最干净的解决方案。当然，这比添加javascript更好。（但答案已经在其他人于2015年发布了）
— bvdb
感觉更干净了。
— 程序员
44

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

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>
展开摘要

Codepen样本

一种替代解决方案，其div居于内容div的中心

— ok
source
4
这无疑是最好的答案。就像是hero-img主页的
— 超级按钮
jsfiddle.net/31ng75du/5经过了Chrome，FF，Edge，Vivaldi的测试
— user2360831
这很简单，也是最好的。
— Dev Anand
38

怎么样，你只需使用vh它代表view height在CSS ...

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

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>
展开摘要

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

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

— 阿里雷扎
source
10
仅当您希望div跨越窗口的整个高度时，这才是好的。现在在其上方放置一个标题div，高度未知。
— LarryBud
@LarryBud，您是对的，这将使包装器成为div，因此所有内容都应放入该div中……
— Alireza
34

CSS3简单方法

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

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

— 梅格拉吉
source
4
如果您不知道其他元素的高度（例如，如果它们包含可变数量的子元素），则此方法不起作用。
— Ege Ersoz，
您也可以使用100vh，任何这样做的人：请确保在减号和元素之间放置空格
— htafoya
28

可以完全通过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

— 奥莫兹
source
2
哇，以前没听说过vh和vw单位。更多信息：snook.ca/archives/html_and_css/vm-vh-units
— Steve Bennett
不幸的是，这不支持IE8 ：(
— Scott
2
我尝试了这种方法，但是height: 100%on #content导致其高度与的高度相匹配#page，而#tdcontent完全忽略的高度。滚动条的内容很多，超出了页面底部。
— 布兰登
28

当内容太高时，需要底部div滚动时，所有发布的解决方案都无法正常工作。这是在这种情况下有效的解决方案：

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>
展开摘要

原始来源：在处理CSS溢出时填充容器的剩余高度

JSFiddle实时预览

— 约翰·库拉克
source
谢谢！！！我尝试了所有非表格，非弹性框的答案，这是唯一能100％正确运行的答案。一个问题：原始源中只有一个body-content-wrapper，没有双重包装（没有任何table-cells），一切似乎也可以正常工作。这样做有问题吗？
— 布兰登
1
@BrandonMintern如果您没有表格单元，则它不适用于IE8和IE9。（请参阅原始文章中的评论。）
— John Kurlak '16
是的，IE10中也需要这些单元。不幸的是，在IE10及以下版本中，该.body高度最终与在上设置的高度相同.container。垂直滚动条仍在正确的位置，但是.container最终拉伸的幅度超出了我们的期望。全屏显示时，其底部.body不在屏幕底部。
— 布兰登
谢谢@JohnKurlak。这是在我的情况下适用的唯一解决方案（flexbox方式被我的客户使用的特定版本的Chrome的错误行为阻止了）
— Maksym Demidas
神圣****！我一直在寻找这个答案很久了！非常感谢。Flexbox在这里不起作用，但表单元确实起作用。惊人。
— aabbccsmith
25

我也一直在寻找答案。如果您有幸能够定位IE8及更高版本，则可以使用display:table和相关值来获取具有div等块级元素的表的渲染规则。

如果您更幸运，并且用户使用的是顶级浏览器（例如，如果这是您控制的计算机上的Intranet应用程序，例如我的最新项目），则可以在CSS3中使用新的“ 灵活框式布局”！

— 克里斯
source
22

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

padding-bottom: 100%;
— 托尼-真藤制作
source
14
100％是什么？如果我尝试这样做，我会得到巨大的空白，并且滚动开始发生。
— mlibby
视口大小的100％可能是@mlibby。如果将html和body也设置为100％高度，则div可以达到100％。如果只有一个div，则100％相对于div内容。我没有尝试使用嵌套div。
— 杰西
1
这意味着元素高度的100％（作为元素的填充添加），这使其高度加倍。无法保证它将填满整个页面，而且绝对不能回答问题。实际上，notet可能比视口更多。
— 马丁
2
padding-bottom：100％设置高度+ 100％父容器宽度
— Romeno
1
from w3school：指定底部填充，以元素宽度的百分比表示。w3schools.com/cssref/pr_padding-bottom.asp
— mehdi.loa 18/09/12
21

免责声明：可接受的答案给出了解决方案的想法，但是我发现它由于不必要的包装和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 */
}

上面的解决方案使用视口单元和flexbox，因此是IE10 +，前提是您使用IE10的旧语法。

玩码本：链接到码本

或这个，对于那些需要在内容溢出的情况下使主容器可滚动的用户：链接到codepen

— 迈克尔·P·巴佐斯
source
主{高度：10像素；flex：1; 溢出：自动}
— Naeem Baghi
2
在浪费时间并测试了几种方法之后，这是最好的方法！简洁，简单，智能。
— marciowb
19

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

这样，我就不需要玩弄显示或定位。当使用Bootstrap制作仪表板（其中有一个侧边栏和一个主菜单）时，这非常方便。我希望主体延伸并填充整个垂直空间，以便可以应用背景色。

div {
    height: 100vh;
}

支持IE9及更高版本：单击以查看链接

— iu
source
14
但是100vh听起来像是所有高度，而不是其余高度。如果您有标题并且想要填充其余内容
— 怎么办
14 
<!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>

在所有理智的浏览器中，您可以将“ header” div作为同级内容放置在内容之前，并且相同的CSS将起作用。但是，在这种情况下，如果float为100％，则IE7-不能正确解释高度，因此，标题必须为内容中的IN，如上所述。溢出：自动将导致IE上的双滚动条（始终具有可见的视口滚动条，但已禁用），但是如果没有它，则内容将在溢出时被裁剪。

— 耶夫
source
关！几乎是我想要的，除了要在div...中top: 0;放置其他内容，即将某些内容放置在标题的正下方。我会再次修改我的问题，因为您的回答完美，但仍然不是我想要的！我只会隐藏溢出内容，因为内容必须适合。
— Vincent McNabb
-1：这个答案创建一个div称为内容覆盖整个屏幕，而不是休息屏幕
— Casebash
11

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

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

另一个选择是CSS Grid Layout，但是对稳定版本的浏览器的支持甚至更少。实际上，只有MSIE 10支持此功能。

— 米科·兰塔莱宁（Mikko Rantalainen）
source
11

我为此花了一段时间，最后得到以下结果：

由于很容易使内容DIV与父对象的高度相同，但显然很难使它的父高度减去标题高度，因此我决定使content 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%;
}
— B_G
source
15
如果您不知道标题的高度怎么办？
— Yugal Jindle 2013年
10

CSS网格解决方案

仅定义bodywith display:grid和grid-template-rowsusing auto和frvalue属性。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
展开摘要

网格的完整指南@ CSS-Tricks.com

— 保利
source
9

为什么不这样呢？

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

为我工作

— Thaoms
source
问题是，如果用户使用大屏幕查看此页面，并且标题的高度正好固定为100px，小于当前高度的40％，则标题和正文上下文之间会有很大的空白。
— Saorikido 2015年
8

您实际上可以使用display: table将区域分为两个元素（标头和内容），其中标头的高度可以变化，内容填充剩余的空间。这适用于整个页面，以及在该地区仅仅是定位与其他元素的含量position设置为relative，absolute或fixed。只要父元素的高度不为零，它将起作用。

看到这个小提琴和下面的代码：

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>
— 格雷格
source
2
我赞成的一个很好的答案，但不幸的是，不适用于IE8，IE8仍然存在很长一段时间。
— 文森特·麦克纳伯
Gmail之类的应用程序使用Javascript进行大小调整，无论如何在大多数情况下，这都是CSS更好的解决方案。
— 文森特·麦克纳伯
我认为他们使用Javascript是因为没有其他好的跨浏览器CSS解决方案，而不是因为它更好。
— 格雷格，
1
@VincentMcNabb在IE8 w3schools.com/cssref/pr_class_display.asp中工作。只需要！DOCTYPE声明。甚至从未知道display属性的表值。很酷的解决方案。+1
— Govind Rai
6

Vincent，我将根据您的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此不需要浮动标题。只需将溢出隐藏在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>
— 耶夫
source
已经想到了这一点。但这也不起作用。我将坚持使用a，table因为它可以工作。不过感谢您的更新。
— Vincent McNabb
5

尝试这个

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

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

— tho
source
4

我遇到了同样的问题，但是我无法使用上面的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>
— 安东尼·布伦尼埃（AnthonyBrenelière）
source
4

对于移动应用程序，我仅使用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/

— 格林马克
source
3
这不是正确的解决方案。vh在移动浏览器中不一致。详情请参阅：stackoverflow.com/questions/37112218/…–
— HarshMarshmallow
3

分拆外星人的想法...

与启用CSS3的浏览器流行的flex box相比，这似乎是一种更干净的解决方案。

只需对内容块使用带有calc（）的min-height（而不是height）。

calc（）以100％开头，并减去页眉和页脚的高度（需要包括填充值）

使用“最小高度”代替“高度”特别有用，因此它可以与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));
}

当然，数学可以简化，但是您可以理解...

— 帕特·M
source
3

在引导程序中：

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>

！[在此处输入图片描述

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>

！[在此处输入图片描述

— 加多夫
source
1

这是我自己的Pebbl解决方案的最低版本。永远花时间寻找使它在IE11中工作的技巧。（也已在Chrome，Firefox，Edge和Safari中进行了测试。）

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>
— 迈克尔·沙德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.