流体高度采用非固定割台

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

尝试一下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

UPDATE（绝对定位）：

以下内容应符合您的要求：）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;