使用非固定标题的流体高度

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

试试这个（SASS）：

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>