2

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

关键是，如果内容区域溢出，我需要滚动它......就像：标题应该始终存在，但内容可以向下滚动，即您的浏览器窗口，栏始终位于顶部和页面滚动。

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

我可以只用 HTML+CSS 来实现，还是需要使用 JS？如何？

4

3 回答 3

2

这个应该做...

#header {
  position:fixed;
}
于 2009-11-23T14:42:21.980 回答
1

你只需要 CSS。下面的代码将制作一个 100 像素高的页眉、一个 50 像素高的页脚和一个名为“内容”的 div，这些 div 将填充页面的其余部分。整个事情将占用视口内的所有可用空间。如果您调整浏览器窗口的大小，页面将相应地缩放。

如果“内容” 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% 的水平可用空间为空。

于 2009-11-23T14:59:45.703 回答
0

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

确保设置溢出：自动；获取内容的滚动条。

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

此链接应该可以帮助您获得获取屏幕高度所需的特定 JS 属性：这里

于 2009-11-23T14:46:28.790 回答