Yet another div height question_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-01 19:50 出处：网络

Over the years, I\'ve struggle开发者_高级运维d with this.This year, there might be a solution.

相关专题：css

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

Yet another div height question

精彩评论

关注公众号

热门标签

图文推荐

Yet another div height question

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：