CSS絕對定位100％高度少填充沒有JS

Question

下面的代碼有一個DIV需要放在容器的頂部，另一個在底部，然後內容需要通過中間。

<div style="position:absolute; top:0; width:100%; height:40px"></div> 

<div class="howto"></div> 

<div style="position:absolute; bottom:0; width:100%; height:40px"></div> 

所以我們不知道包含DIV的高度。沒有JS的情況下，具有類howto的div如何將容器DIV的高度減去頂部和底部絕對定位div的高度，以包含這兩個DIV之間的內容。

Answer 1

對於要實現的目標，這是一個可能的解決方案：

@tinkerbin：http://tinkerbin.com/QsaCPgR6

HTML：

<div class="container"> 
    <div class="header"></div> 

    <div class="howto"> 
     Has height set to auto. You may change that if you want to. 
    </div> 

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

CSS：

.container { 
    position: relative; 
    padding: 40px 0; /* top and bottom padding = .header and .footer padding*/ 
} 

.header, 
.footer { 
    position: absolute; 
    height: 40px; 
    width: 100%; 
} 

.header { 
    top: 0; 
} 

.footer { 
    bottom: 0; 
} 

.howto { 
    height: /*specifiy one if you wish to*/; 
} 

Answer 2

據我所知，沒有一種純CSS的方式來做你想做的事情沒有JS。

查看SA此之前的帖子：

Make a div fill the height of the remaining screen space