Question

我的页面有两个区域：标题和内容标题应该[当然]固定在顶部，并且没有固定的高度，以及它下面的内容。

关键是我需要滚动内容区域，如果它溢出...就像：标题应该总是在那里，但内容可以向下滚动，即你的浏览器窗口，条形总是在顶部和页面滚动。

我正在使用JS在另一个页面中执行此操作，其中“页脚”具有固定高度，因此我可以说“嘿，内容，使用页面高度减去页脚高度”。

我是否可以仅使用HTML + CSS实现此功能，还是需要使用JS？怎么样？

Answer 1

应该这样做......

#header {
  position:fixed;
}

Answer 2

你只需要CSS。下面的代码将生成一个100px的高标题，一个50px的高页脚和一个名为“content”的div，它将填充页面的其余部分。整个过程将占用视口内的所有可用空间。如果您调整浏览器窗口的大小，页面将相应缩放。

如果“content”div中有足够的东西，你会在里面找到一个滚动条。滚动条不会覆盖页眉或页脚的任何部分，它将位于“内容”div中。

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

div#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}

div#content {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow: auto;
}


div#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

以不同的方式设置“左”和“右”，您可以只占用一定的可用空间。

div#header {
    position: fixed;
    top: 0;
    left: 20%;
    right: 20%;
    height: 100px;
}

div#content {
    position: fixed;
    top: 100px;
    left: 20%;
    right: 20%;
    bottom: 50px;
    overflow: auto;
}


div#footer {
    position: fixed;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 50px;
}

使用上面的CSS，整个事物将居中，并将40％的水平可用空间留空。

Answer 3

设置标题高度将使这更容易，但最终，javascript将帮助您完成您正在寻找的内容。基本上你需要知道用户屏幕的高度和标题的高度。从用户屏幕的高度中减去标题的高度，并使用该值设置内容的高度。

确保设置overflow：auto;获取内容的滚动条。

您正在使用div作为布局，而不是表格，对吗？如果没有，请考虑进行更改。使用div的网页设计比桌面设计更容易操作。

此链接可以帮助您获取获取屏幕高度所需的特定JS属性：Here

如何制作弹性垂直布局？

3 个答案: