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

和 HTML

我查了一下它,它可以在所有主要的浏览器:Chrome,IE,和FireFox

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

HTML:

  

    
This is the header whose height is unknown
    
This is the header whose height is unknown
    
This is the header whose height is unknown
  
  

    

      

        

          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
          
This is the scrollable content whose height is unknown
        
      
    
  

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实时预览

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

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

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

padding-bottom: 100%;

    
Header with an arbitrary height
    

        This container will grow so as to take the remaining height
    

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 */
}

div {
    height: 100vh;
}

    

        

                Header
                
Header stuff
        
            Content
            
Content stuff
    

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

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

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

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

    

        
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.
        

    
    

        

            
This is the actual content that takes the rest of the available space.
        
    

  
    
    



  

    Header
    
Header stuff
  

  

    Content
    
Content stuff
    
Positioned Content