如何让内容div的高度成比例？

Question

我有以下的html：

<div id=wrapper> 
    <header> 
    ... 
    </header> 

    <div id=content> 
    ... 
    </div> 

    <footer> 
    ... 
    <footer> 
</div> 

的CSS：

html, body { 
    height: 100%; 
} 
#wrapper { 
    height: 100%; 
} 
header { 
    height: 50px; 
} 
#content { 
    height: 80%; 
    overflow: scroll; 
} 
footer { 
    height: 50px; 
} 

我想，让<header>和<footer>总是出现，这是根据窗口的高度调整大小的content div 。

但是对于上面的CSS，如果窗口的高度低于某个高度，则<footer>将超出页面。如何解决它？

Answer 1

一种选择是使用calc()，支持IE 9 +

内容的div给出height: calc(100% - 150px)。也就是说，页面高度的100％减去页眉和页脚的高度。 overflow-y: auto将滚动内容div以防止内容溢出。

关于浏览器兼容性的说明： IE 8及以下版本根本不会给内容div一个高度。根据您的需求，这可能不成问题。作为后备，您还可以提供一个百分比高度以上的内容div 以上的计算高度，以便IE 8及更低版本将具有未优化的高度。

你可以看到浏览器列表support over here。

Read more about calc over on the MDN

CSS/HTML /演示

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#wrapper { 
 
    height: 100%; 
 
} 
 
header { 
 
    height: 50px; 
 
    background: #9c27b0; 
 
} 
 
#content { 
 
    height: calc(100% - 150px); 
 
    background: #f8bbd0; 
 
    overflow-y: auto; 
 
} 
 
footer { 
 
    height: 100px; 
 
    background: #e91e63; 
 
}

<div id="wrapper"> 
 
    <header></header> 
 
     <div id="content"></div> 
 
    <footer></footer> 
 
</div>