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

在...创建的问题 Fri, Feb 8, 2019 12:00 AM

我正在开发一个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>

页面的整个高度已填满,无需滚动。

对于内容div中的任何内容,设置top: 0;会将其置于标题下方。有时内容将是一个真实的桌子,其高度设置为100%。将header置于content内将无法实现此功能。

有没有办法在不使用table的情况下达到相同的效果?

更新强>

内容div中的元素也将高度设置为百分比。因此div内部100%的东西会将其填充到底部。两个元素也是50%。

更新2:

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

    
1619
  1. 对于将来磕磕绊绊的人,你可以在大多数浏览器中获得所需的表格布局,不使用表格标记,使用display:table和相关属性,参见这个答案是一个非常相似的问题。
    2014-01-20 02:23:12Z
  2. 我试图接收你的设置 - jsfiddle.net /ceELs - 但它不起作用,我错过了什么?
    2014-04-14 12:12:05Z
  3. @ Mr。 Alien的答案很简单实用,请查看 http://stackoverflow.com/a/23323175/188784
    2014-06-20 03:30:51Z
  4. 实际上,你描述的内容不起作用,即使是表格:如果内容占用的空间比屏幕高度更大,表格单元格和整个表格将会扩展到屏幕底部。您的内容溢出:自动不会显示滚动条。
    2014-07-01 20:00:04Z
  5. @ GillBates它将在您指定父元素的高度后查看 jsfiddle.net/ceELs/5
    2014-09-30 09:45:49Z
  6. 醇>
    30答案                              30 跨度>                         

    2015年更新:flexbox方法

    另外还有两个答案简要提及弹性箱;然而,这是两年多以前的事了,他们没有提供任何例子。 flexbox的规范现在已经确定。

      

    注意:尽管CSS Flexible Boxes Layout规范处于候选推荐阶段,但并非所有浏览器都实现了它。 WebKit实现必须以-webkit-为前缀; Internet Explorer实现了旧版本的规范,前缀为-ms-; Opera 12.10实现了最新版本的规范,没有前缀。有关最新的兼容性状态,请参阅每个属性的兼容性表。

         

    (取自 https://developer.mozilla.org/en-US/文档/网络/指南/CSS /Flexible_boxes

    所有主要的browsers和IE11 +支持Flexbox。对于IE 10或更早版本,您可以使用FlexieJS垫片。

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

    工作示例

    使用flexbox,您可以轻松地在具有固定尺寸,内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中,我已将标题设置为与其内容对齐(根据OPs问题),我添加了一个页脚以显示如何添加固定高度区域,然后设置内容区域以填充剩余空间。

     
    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有一个对灵活盒模型的良好介绍

        
    888
    2016-09-19 19:30:17Z
    1. 为什么flex: 0 1 30px;中的box .row属性会在每个div中覆盖?
      2015-11-15 09:36:39Z
    2. 这是对flexbox的浏览器支持 - 很高兴看到所有绿色 - caniuse.com/#feat=flexbox
      2016-05-10 18:40:04Z
    3. 肯定这是一个非常好的方法,它几乎可以工作;)当div.content的内容超过原始的弹性高度时,有一个小问题。在当前的实现中,“页脚”将被推低,这不是开发人员期望的;)所以我做了一个非常简单的修复。 jsfiddle.net/przemcio/xLhLuzf9/3 我在容器和溢出卷轴上添加了additioal flex。
      2016-07-13 21:55:59Z
    4. @ przemcio不错的观点,但我不认为可滚动内容是每个开发人员所期望的;) - 你应该只需要添加overflow-y: auto.row.content来实现你的目标但需要。
      2016-10-01 11:51:57Z
    5. 如果你把100vh放在.box上就好了。
      2017-11-30 01:36:58Z
    6. 醇>

    在CSS中确实没有一种完善的跨浏览器方式。假设您的布局很复杂,您需要使用JavaScript来设置元素的高度。你需要做的是:

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

    一旦你可以获得这个值并设置元素的高度,你需要将事件处理程序附加到窗口onload和onresize,以便你可以激活你的resize函数。

    另外,假设您的内容可能比视口大,则需要设置overflow-y进行滚动。

        
    218
    2013-09-03 17:52:04Z
    1. 这就是我所怀疑的。但是,该应用程序也将关闭Javascript,所以我想我会继续使用该表。
      2008-09-18 09:22:12Z
    2. Vincent,立足之路。我当时想做同样的事情,用css看起来不可能吗?我不确定,但无论其他大量的解决方案都没有做到你所描述的。 javascript one是唯一一个在这一点上正常工作的。
      2010-05-04 20:00:03Z
    3. 如果窗口高度发生变化
      该怎么办?
      2013-11-17 08:55:26Z
    4. @ Techsin使用jquery或喜欢绑定到窗口调整大小事件:$(window).bind('resize orientationchange',doResize);
      2013-12-26 15:55:07Z
    5. 我的意思是......为什么我们在2013年没有使用计算?
      2014-02-19 23:21:27Z
    6. 醇>

    原帖超过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>
        
    162
    2018-03-11 08:16:00Z
    1. 这只有一个问题:页眉和页脚不是自动调整大小的。 是真正的困难, 是“这是不可能的”答案目前在顶部的原因......
      2012-03-04 17:16:43Z
    2. 我需要一个55px的标题和一个填充文档高度其余部分的div。这是解决方案!
      2012-09-11 00:46:21Z
    3. 你是炸弹,我已经尝试了这么久,这是我找到的唯一解决方案。我需要我的导航元素在顶部为60px高度,其余部分为100%,这解决了它。
      2013-01-07 10:07:03Z
    4. 这很有效,除了我有一个小问题 - 如果我把一个display: table的元素放在体内,它似乎溢出了身体。所以做height: 100%不会产生正确的高度。
      2014-03-08 00:38:07Z
    5. .col未使用,是吗?
      2015-11-02 12:34:58Z
    6. 醇>

    您可以使用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 } 
    
        
    138
    2016-04-13 14:09:16Z
    1. 我刚刚指出 css的技巧表的。原来答案已经在这个已回答的问题中已经存在。这是第i个e 最佳解决方案;干净,优雅,并按照预期的精确方式使用精确的工具。 CSS表
      2013-08-10 22:27:50Z
    2. 小提琴代码与此处的答案不完全匹配。在我的测试中添加html, body { height: 100%, width: 100% }似乎很关键。
      2013-11-23 16:14:37Z
    3. CSS表的烦人特征与普通表完全相同:如果内容太大,则扩展单元格以适应。这意味着您可能仍需要限制大小(max-height),或者如果页面是动态的,则从代码设置高度。 我真的很想念Silverlight网格! :(
      2014-02-24 17:32:15Z
    4. 您始终可以在表格行元素中添加绝对定位的容器,然后将其宽度和高度设置为100%。记住也要在table-row元素上将position设置为relative。
      2016-05-13 16:40:33Z
    5. @MikeMellor在IE11中不起作用,因为它似乎忽略relative元素上的table-row定位,因此取得第一个位置上升的高度不是表元素。 /DIV>
      2016-08-30 16:32:40Z
      醇>

      仅限CSS方法(如果已知/固定高度)

      如果希望中间元素垂直跨越整个页面,可以使用 calc() 在CSS3中引入。

      假设我们有固定高度 headerfooter元素,我们希望section标记采用整个可用的垂直高度......

      演示

      假定加价

       
      <header>100px</header>
      <section>Expand me for remaining space</section>
      <footer>150px</footer>
      

      所以你的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;
      }
      

      所以在这里,我们正在做的是,将元素的高度相加,而不是使用100%函数从calc()中扣除。

      请确保您使用height: 100%;作为父元素。

          
      84
      2015-11-05 16:00:53Z
      1. OP表示标题可以是任意高度。因此,如果您事先不知道高度,您将无法使用calc:(
        2014-04-28 08:20:35Z
      2. @ Danield这就是我提到固定高度的原因:)
        2014-04-28 10:52:02Z
      3. 这个解决方案对我有用,并且不需要我重新设计我在Flexbox上的现有页面。如果你正在使用LESS,即Bootstrap,请务必阅读 coderwall 发布了如何转义calc()函数,因此LESS不处理它。
        2015-08-01 00:48:32Z
      4. Op说'这可能是一个任意的高度'。任意手段由设计师决定,因而固定。这个解决方案是迄今为止最好的解决方案。
        2018-04-25 16:09:28Z
      5. 醇>

      用于:  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>
          
      48
      2016-05-22 03:20:04Z
      1. 在我看来,最干净的解决方案。这肯定比添加javascript更好。 (但答案已于2015年公布别人)
        2019-01-22 11:52:54Z
      2. 感觉更干净。
        2019-03-31 05:36:20Z
      3. 醇>

      如何在 CSS 中简单地使用vh代表view height ...

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

       
      body {
        padding: 0;
        margin: 0;
      }
      
      .full-height {
        width: 100px;
        height: 100vh;
        background: red;
      }
      <div class="full-height">
      </div>

      另外,请查看我为您创建的图片:

          
      35
      2018-06-01 05:46:05Z
      1. 如果你想让div跨越窗口的整个高度,这是唯一的好处。现在在它上方放置一个标题div,其高度未知。
        2018-03-09 01:53:31Z
      2. @ LarryBud你是对的,这就是包装div,所以一切都应该进入这个div ......
        2018-03-09 02:42:17Z
      3. 醇>

      CSS3简单方法

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

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

          
      31
      2018-03-11 16:13:52Z
      1. 如果您不知道其他元素的高度(例如,如果它们包含可变数量的子元素),则此方法无效。
        2019-03-19 17:53:48Z
      2. 你也可以使用100vh,任何人都这样做:确保在减号和元素之间放置空格
        2019-03-27 03:59:05Z
      3. 醇>

      可以使用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,IEFireFox

          
      27
      2016-01-14 22:02:24Z
      1. 哇,之前从未听说过vhvw单位。更多信息: snook.ca/archives/html_and_css/vm-vh-units
        2015-04-01 11:30:58Z
      2. 不幸的是,这不支持IE8:(
        2016-01-06 21:01:31Z
      3. 我尝试了这种方法,但是height: 100%上的#content导致它的高度与#page相匹配,完全忽略了#tdcontent的高度。滚动条有很多内容,超出页面底部。
        2016-07-08 13:44:01Z
      4. 醇>

      一个简单的解决方案,使用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中居中

          
      27
      2019-04-08 15:08:41Z
      1. 这是肯定的最佳答案。像英雄img主页的魅力,或英雄-img与导航栏的组合
        2019-05-23 18:27:24Z
      2. 醇>

      当内容太高时需要底部div滚动时,没有任何解决方案发布。这是一个适用于这种情况的解决方案:

      HTML:

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

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

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

      JSFiddle实时预览

          
      26
      2016-01-28 13:20:37Z
      1. 谢谢!!!我尝试了所有非table,非flexbox的答案,这是唯一一个100%正确工作的答案。一个问题:原始源只有一个body-content-wrapper,如果没有双包装(没有任何table-cell s),事情似乎工作得很好。这样做是否有问题?
        2016-07-08 14:26:32Z
      2. @ BrandonMintern如果你没有表格单元格,它在IE8和IE9中不起作用。 (参见原始文章中的评论。)
        2016-07-09 21:50:46Z
      3. 是的,在IE10中也需要单元格。不幸的是,在IE10及以下版本中,.body的高度最终与.container的高度相同。垂直滚动条仍然在正确的位置,但.container最终会拉伸比我们想要的更大。当它是全屏时,.body的底部不在屏幕的底部。
        2016-07-11 22:16:06Z
      4. 醇>

      我一直在寻找答案。如果您有幸能够以IE8及更高版本为目标,则可以使用display:table及相关值来获取包含div的块级元素的表的呈现规则。

      如果您更幸运并且您的用户使用顶级浏览器(例如,如果这是您控制的计算机上的Intranet应用程序,就像我的最新项目一样),您可以使用新的 CSS3中的灵活包装布局

          
      23
      2017-12-26 19:20:39Z

      对我有用(在另一个div中使用div而我在其他所有情况下都假设)是将底部填充设置为100%。也就是说,将其添加到您的css /stylesheet中:

       
      padding-bottom: 100%;
      
          
      22
      2013-10-31 10:28:29Z
      1. 100%是什么?如果我尝试这个,我会得到一个巨大的空白区域,滚动开始发生。
        2013-11-23 15:44:29Z
      2. 100%的视口大小可能是@mlibby。如果你将html和body设置为100%高度,则div可以达到100%。只有一个div,100%将相对于div内容。我没有尝试使用嵌套div。
        2014-09-18 01:44:57Z
      3. 它表示元素高度的100%(作为元素的填充添加),这使得它的高度加倍。不能保证它会填满页面,绝对不是问题的答案。它实际上可能已经填充了比视口更多的内容。
        2015-07-01 10:43:41Z
      4. padding-bottom:100%设置高度+父容器的100%宽度
        2016-06-01 17:24:44Z
      5. 来自w3school的
        :指定底部填充,以元素宽度的百分比表示。 w3schools.com/cssref/pr_padding-bottom.asp
        2018-09-12 03:59:43Z
      6. 醇>
        

      免责声明:接受的答案给出了解决方案的想法,但我发现它有点臃肿与不必要的包装和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:指向codepen的链接

      或者这个,对于那些需要主容器在内容溢出时可以滚动的人:链接到codepen

          
      15
      2016-01-03 17:16:47Z
      1. main {height:10px; flex:1; overflow:auto}
        2018-01-01 13:22:59Z
      2. 醇>
       
      <!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将起作用。但是,如果在这种情况下浮点数是100%,则IE7-不能正确解释高度,因此标题需要在内容中,如上所述。溢出:auto会导致IE上的双滚动条(它始终具有视口滚动条可见,但已禁用),但没有它,如果内容溢出,内容将剪辑。

          
      13
      2008-09-18 06:01:58Z
      1. 关闭!几乎我想要的东西,除了我将要在div中放置其他东西......即top: 0;将在标题下面放置一些东西。我会再次修改我的问题,因为你完美地回答了它,但仍然不是我想要的!我只是隐藏溢出,因为内容必须适合。
        2008-09-18 07:50:41Z
      2. - 1:这个答案创建一个名为内容的div,覆盖整个屏幕,而不是屏幕的 rest
        2011-05-19 05:44:33Z
      3. 醇>

      现在有很多答案,但我发现使用height: 100vh;来处理需要填满整个垂直空间的div元素。

      通过这种方式,我不需要玩显示或定位。这在使用Bootstrap制作仪表板时派上用场,其中我有侧边栏和主边栏。我希望主要伸展和填充整个垂直空间,以便我可以应用背景颜色。

       
      div {
          height: 100vh;
      }
      

      支持IE9及更高版本:点击查看链接

          
      12
      2019-02-19 17:28:18Z
      1. 但100vh听起来像所有高度,而不是剩余高度。如果你有一个标题然后你想填补剩下的
        怎么办?
        2018-03-13 10:05:12Z
      2. 醇>

      如果您可以处理不支持旧版浏览器(即MSIE 9或更早版本),则可以使用灵活的盒子布局模块,已经是W3C CR。该模块也允许其他好的技巧,例如重新排序内容。

      不幸的是,MSIE 9或更低版本不支持此功能,您必须为除Firefox之外的每个浏览器使用CSS属性的供应商前缀。希望其他供应商也很快放弃前缀。

      另一个选择是 CSS网格布局,但稳定版浏览器的支持更少。实际上,只有MSIE 10支持这一点。

          
      11
      2013-05-03 10:55:31Z

      我暂时搁置了一段时间,最后得到了以下内容:

      由于很容易使内容DIV与父级相同,但显然难以使父级高度减去标题高度我决定使内容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%;
      }
      
          
      10
      2013-10-31 10:39:44Z
      1. 如果您不知道标题的高度怎么办?
        2013-03-17 07:46:49Z
      2. 醇>

      为什么不这样呢?

       
      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(按此顺序)一个高度,然后给你的元素一个高度?

      为我工作

          
      9
      2013-10-22 00:05:50Z
      1. 问题是,如果用户使用大屏幕查看此页面,并且标题的高度固定为100px,小于当前高度的40%,则会有标题和正文上下文之间存在很大差距。
        2015-05-14 08:13:05Z
      2. 醇>
       
       style="height:100vh"
      

      为我解决了这个问题。在我的情况下,我将其应用于所需的div

          
      7
      2018-03-23 10:43:44Z

      CSS网格解决方案

      使用body定义display:grid,使用grid-template-rows定义autofr值属性。

       
      * {
        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

          
      6
      2017-07-04 14:27:17Z

      您实际上可以使用display: table将区域拆分为两个元素(标题和内容),其中标题的高度可能不同,内容会填充剩余的空间。这适用于整个页面,以及当区域只是位于position设置为relative,absolutefixed的另一个元素的内容时。只要父元素的高度非为零,它就会起作用。

      查看此小提琴以及以下代码:

      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>
      
          
      5
      2013-08-01 14:47:28Z
      1. 一个很好的答案,我赞成,但遗憾的是,它不适用于IE8,IE8仍将存在很长一段时间。
        2013-07-09 06:24:16Z
      2. Gmail等应用程序使用Javascript进行大小调整,这在大多数情况下都是CSS的更好解决方案。
        2013-07-09 21:31:54Z
      3. 我认为他们使用的是Javascript,因为没有其他好的跨浏览器CSS解决方案,不是因为它更好。
        2013-07-09 21:37:44Z
      4. @ VincentMcNabb在IE8中工作 w3schools。 COM /cssref /pr_class_display.asp 。只需要!DOCTYPE声明。甚至都不知道display属性的表值。酷解决方案。 1
        2016-09-25 05:45:38Z
      5. 醇>
      文森特,我会再次使用您的新要求回答。由于您不关心隐藏的内容(如果内容太长),您不需要浮动标题。只需将溢出隐藏在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>
      
          
      5
      2014-08-20 23:11:27Z
      1. 已经想到了这个。但它也不起作用。我只是坚持使用table,因为它有效。感谢您的更新。
        2008-09-18 18:02:42Z
      2. 醇>

      试试这个

       
      var sizeFooter = function(){
          $(".webfooter")
              .css("padding-bottom", "0px")
              .css("padding-bottom", $(window).height() - $("body").height())
      }
      $(window).resize(sizeFooter);
      
          
      4
      2013-10-31 10:40:22Z

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

          
      3
      2012-09-14 08:02:34Z

      对于移动应用程序,我只使用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;
      }
      

      德mo - https://jsfiddle.net/u763ck92/

          
      3
      2017-02-01 15:59:23Z
      1. 这不是正确的解决方案。 vh在移动浏览器中不一致。有关详细信息,请参阅此处: 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>
        
            
        2
        2016-08-25 16:20:25Z

      脱离外星人先生的想法......

      对于支持CSS3的浏览器来说,这似乎比流行的弹性框更清晰。

      只需将最小高度(而不是高度)与calc()一起使用到内容块即可。

      calc()以100%开头并减去页眉和页脚的高度(需要包含填充值)

      使用“min-height”而不是“height”特别有用,因此它可以使用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));
      }
      

      当然,数学可以简化,但你明白了......

          
      2
      2017-12-13 11:01:29Z

      动态计算提醒屏幕空间,使用Javascript更好。

      您可以使用CSS-IN-JS技术,如下面的lib:

      https://github.com/cssobj/cssobj

      DEMO: https://cssobj.github.io/cssobj-demo/     

      0
      2016-10-13 02:28:18Z

      从未以其他方式为我工作,然后使用JavaScript 作为NICCAI在第一个答案中建议的。我正在使用这种方法使用谷歌地图重新缩放<div>

      以下是如何执行该操作的完整示例(适用于Safari /FireFox /IE /iPhone /Andorid(适用于旋转)):

      CSS

       
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      .header {
        height: 100px;
        background-color: red;
      }
      
      .content {
        height: 100%;
        background-color: green;
      }
      

      JS

       
      function resize() {
        // Get elements and necessary element heights
        var contentDiv = document.getElementById("contentId");
        var headerDiv = document.getElementById("headerId");
        var headerHeight = headerDiv.offsetHeight;
      
        // Get view height
        var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
      
        // Compute the content height - we want to fill the whole remaining area
        // in browser window
        contentDiv.style.height = viewportHeight - headerHeight;
      }
      
      window.onload = resize;
      window.onresize = resize;
      

      HTML

       
      <body>
        <div class="header" id="headerId">Hello</div>
        <div class="content" id="contentId"></div>
      </body>
      
          
      - 2
      2016-01-28 13:15:29Z
来源放置 这里