Question

多年来，我一直在努力解决这个问题。今年，可能有一个解决方案。我需要标题，内容和页脚。我希望页脚位于页面底部，页眉位于顶部，内容位于页面底部。

我希望内容有滚动条。

问：这太难问了吗？

Answer 1

如果页眉和页脚具有固定的高度：

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

Answer 2

我不完全确定这是否真的能回答你的问题，但是如果有必要（例如，如果容器的内容超出其大小），则获取滚动条的属性是

overflow: auto

水平和垂直滚动条有选择性属性：

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

但它们是CSS 3.0规范的一部分，仅受有限数量的浏览器支持（即Firefox＆gt; 1.5，Opera和Safari）。

Answer 3

这为您提供了一个高度为50像素的固定页眉和页脚，以及一个可滚动的内容区域。

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

Answer 4

如果您只想滚动内容，可以使用固定的页眉和页脚。这是我所知道的唯一方式。查看此链接以获取实施提示：

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

Answer 5

答：否。

CSS：

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

另一个div高度问题

5 个答案: