html - 非固定集管的流体高度

Question

我需要一个带有标题和内容部分的网页。

标题的内容高度可变，内容也是。页面应为 100%，如果内容 div 溢出，则应显示滚动条(仅针对内容 div，而非整个页面)。

我想远离 JQuery/JS 解决方案并使用 CSS(sass？)解决这个问题

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

更新(绝对定位):

以下应满足您的要求:)

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