0

我正在尝试设计一个布局，我将在顶部有 100px 的标题。页脚 80px 始终粘在浏览器屏幕的底部以及页眉和页脚之间的可滚动内容区域。当我完成写作直到内容触及页脚的顶端时，垂直滚动条应该出现在内容区域中。

任何人都可以建议我如何实现这一目标

这是我尝试过的：JsFiddle

<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>

我的CSS：

header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
    height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
    overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
4

4 回答 4

0

告诉我你试过什么？我没有看到任何页眉、页脚，只是可缩放 div 中的文本。

好的，让我指导你一点。

你所做的很简单，但需要你理解这一点。

如何使页脚粘在底部。

footer {
 position: absolute; // position as absolute..
 bottom: 0; // margin-bottom as 0 
 max-width: 80px; // width
 margin: 0 auto; // margin..
}

这将使页脚始终停留在文档的末尾，我的意思是在页面的底部。

如何制作标题

header {
 position: absolute;
 top: 0;
 max-width: 100px;
 margin: 0 auto;
}

如何制作可滚动的 div

我不完全理解这一点。所以我只是要指导你一点。

您可以在内容 div 中创建滚动条。你要这个：

垂直滚动条应该出现在内容区域

你可以通过使用这个来做到这一点：

div {
 max-height: 100px;
 min-height: 100px;
}

我将假设您要将div元素或类或 id 更改为您拥有的那个。

使用滚动条制作可滚动的 div。

首先，您将创建一个具有最大高度的 div，以使 div 不超过屏幕的高度。然后你可以使用这样的滚动条：

overflow: scroll;

将此属性添加到元素。这样，您将拥有一个页脚、一个页眉和一个内容块，该块本身有一个滚动条，而不是浏览器拥有的滚动条。

小提琴为此：

http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/

我真的很抱歉，但我没有费心改变背景，但你可以看到，页眉留在那里，页脚在最后，而 div 滚动！:)

祝你好运！

于 2013-10-09T15:45:54.393 回答
0

我之前回答过一个类似的问题：基于 Div 高度百分比但仍在滚动

这是一种方法。

的HTML：

<header>The Header...</header>
<div id="main">
    <div id="content">
        scrollable content area
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>

CSS：

html, body {
    height: 100%;
}
body { 
    margin: 0;
}
header {
    height: 100px;
    width: 100%;
    background: #bbb;
    position: absolute;
    top: 0;
}
#main {
    background: #ccc;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow-y: auto;
}
#content {
    overflow: auto;
    background: green;
}
footer {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: #aaa;
}

诀窍是创建一个绝对定位的块容器，它跨越页眉和页脚之间的区域#main，使用上、下、左、右偏移量，并应用overflow-y: auto。

然后#content将占用空间并最终触发滚动条#main。

参见演示：http: //jsfiddle.net/audetwebdesign/aNRE9/

于 2013-10-09T15:54:37.313 回答
0

编辑： FIDDLE

#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
于 2013-10-09T15:56:20.753 回答
0

不幸的是，您将需要为此使用 JavaScript。没什么大不了的。我还添加了调整窗口大小时的处理程序。

var resizeTimer;
window.onload = function(){
    makeMiddleFull();
}

window.onresize = function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
    var cobj = document.getElementById('content');
    cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

在此处查看更新的小提琴以获取包括 DOM 和 CSS 在内的完整代码更新：http: //jsfiddle.net/Qpc2s/2/

于 2013-10-09T15:56:34.270 回答