CSS中扩展的中间 [英] An expanding middle in CSS

问题描述

我如何设计一个固定高度的页眉和页脚（附在浏览器窗口的顶部和底部），但是扩展中间的网站。滚动条将仅用于中间（图中的橙色部分），以便页面的其余部分永远不需要滚动。我已经在下面画了一个模型来解释更清楚。

理想情况下，它需要完全实现在CSS和HTML（没有javascript fiddles！我有很远的这个问题，但我不能强迫橙色部分填充剩余的空间，当它没有满（无论是内容），如果溢出开始滚动。

< 这是你想要的：

现场演示 （ edit ）

HTML ：

 < div id =header> Patrick< / div> 
< div id =content> ..< / div> 
< div id =footer> Beardmore< / div> 
  

CSS：

  html，body {
 margin：0; 
 padding：0; 
 border：0; 
 overflow：hidden 
} 
 #header，#content，#footer {
 position：absolute; 
 left：0; 
 width：100％
} 
 #header {
 top：0; 
 height：100px; 
 
 background：#ccc 
} 
 #content {
 top：100px; 
 bottom：100px; 
 overflow-y：auto 
} 
 #footer {
 bottom：0; 
 height：100px; 
 
背景：#ccc 
} 
  

How would I go about designing a website which has a fixed height header and footer (attached to the top and bottom of the browser window) but an expanding middle. The scroll bars would be only for the middle (orange section in diagram) so that the rest of the page would never need to scroll. I have drawn a mock-up below to explain more clearly.

Ideally it needs to be entirely implemented in CSS and HTML (no javascript fiddles!). I've got quite far with this problem but I can't force the orange section to fill up the remaining space when it isn't full(whatever it's content) and start scrolling if it overflows.

解决方案

I think this is what you want:

Live Demo (edit)

HTML:

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}

这篇关于CSS中扩展的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！