帶有非固定集管的流體高度

Question

我需要一個帶有標題和內容部分的網頁。

標頭的內容的高度可變，內容也一樣。 頁面應該是100％，如果內容div溢出，它應該顯示滾動條（僅針對內容div，而不是整個頁面）。

我想遠離JQuery / JS解決方案，並使用CSS解決此問題（無禮？）

<div class="body"><!-- 100% height -->
    <div class="header">
        <h1>Header</h1>
        <p>Variable content with max-height</p>
    </div>
    <div class="content">
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
    </div>
</div>
<style>
    div.body{
        height: 100%;
    }
    div.header{
        max-height: 100px;
        overflow: hidden;
    }
    div.footer{
        overflow-y: ???
        /* 100% - height of header */
    }
</style>

Answer 1

試試看：

 div.body { height: 100%; } div.header { background-color: #CCCCFF; max-height: 100px; text-align: center; overflow: hidden; } div.content { height:240px; overflow:scroll; } div.footer { background-color: #CCCCCC; text-align: center; overflow: hidden; } 

 <div class="body"><!-- 100% height --> <div class="header"> <h1>Header</h1> <p>Variable content with max-height</p> </div> <div class="content"> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> </div> <div class="footer"> <h2>Footer</h2> <p>I'm a footert</p> </div> </div> 

UPDATE（具有絕對定位）：

以下應符合您的要求：）

 .header { /* remove me - test purpose only */ background-color: #CCCCFF; text-align: center; /* end of test purpose */ top:0px; left:0px; right:0px; max-height: 100px; overflow:hidden; position:absolute; } .content { top:100px; bottom:100px; left:0px; right:0px; position:absolute; overflow:auto; } .footer { /* remove me - test purpose only */ background-color: #CCCCCC; text-align: center; /* end of test purpose */ bottom:0px; left:0px; right:0px; height:100px; overflow:hidden; position:absolute; } 

 <div class="body"><!-- 100% height --> <div class="header"> <h1>Header</h1> <p>Variable content with max-height</p> </div> <div class="content"> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> <p>Variable content with scroll-y</p> </div> <div class="footer"> <h2>Footer</h2> <p>I'm a footert</p> </div> </div>