开发者

Yet another div height question

Over the years, I've struggle开发者_高级运维d with this. This year, there might be a solution. I need a header, content and footer. I would like the footer to be at the bottom of the page, the header at the top, and the content in between.

I would like the content to have a scroll bar.

Q: Is that too much to ask?


If the header and footer have fixed heights:

<style type="text/css">
    #header {
        height: 100px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: red;
    }
    #footer {
        height: 100px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: green;
    }
    #content {
        width: 100%;
        position: absolute;
        left: 0;
        top: 100px;
        bottom: 100px;
        overflow: auto;
        background-color: blue;
    }
</style>

<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>


I'm not entirely sure whether this really answers your question but the property for getting a scroll bar if necessary (i.e. if a container's content exceeds its size) is

overflow: auto

there are selective properties for horizontal and vertical scroll bars:

overflow-x: auto;
overflow-y: auto;

but they are part of the CSS 3.0 specification and only supported by a limited number of browsers (namely Firefox > 1.5, Opera and Safari).


This give you a fixed header and footer of height 50 px, and a content area that is scrollable.

<html>
<body>
  <div id="header" style="position:absolute; left:0px; top:0px; height: 50px; overflow:hidden">
  </div>
  <div id="content" style="position:absolute; left:0px; top:50px; bottom:50px; overflow:auto;">
  </div>
  <div id="footer" style="position:absolute; left:0px; bottom:0px; height:50px; overflow:hidden;">
</body>
</html>


If you want just the content to scroll, you can have a fixed header and footer. That's the only way I know of. Check out this link for implementation hints:

http://www.pmob.co.uk/temp/fixedlayoutexample5.htm


A: No.

CSS:

#content {
  height: XXXpx;
  overflow-y: auto;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜