设计三行html布局

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

谁能建议我怎样才能做到这一点

以下是我尝试过的：

---

告诉我你试过什么？我没有看到任何页眉，任何页脚，只有scollable div中的文本

好的，让我给你介绍一下

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

如何使页脚粘到底部。 这将使页脚始终停留在文档的末尾，即页面的底部

如何制作标题 如何制作可滚动的div 我不完全理解这一点。所以我只想给你们介绍一下

您可以在content div中创建滚动条。您需要：

垂直滚动条应位于内容区域中

您可以使用以下方法来完成此操作：

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

我假设您要将

div

更改为元素、类或id，并将其更改为您正在使用的元素、类或id

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

overflow: scroll; 

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

为这件事提琴：

我真的很抱歉，但我没有费心更改背景，但是您可以看到，页眉保持在那里，页脚在末尾，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>

诀窍是使用顶部、底部、左侧、右侧偏移量创建一个绝对定位的块容器，该容器跨越页眉和页脚之间的区域，

#main

，并应用

overflow-y:auto

然后，“代码”>“内容”将占用空间，并最终触发主菜单上的滚动条

请参见以下演示：

编辑：

---

不幸的是，您需要使用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），请参见更新的fiddle：

---

对于您的

页边距：0自动这会使项目粘在HTML文档的底部还是窗口的底部？我好奇地问：）我想要像gmail一样的精确布局。我们有一个可滚动的内容区，可以显示我们的邮件。边距和粘性无关！粘性将通过
位置：绝对值来确定；底部：0就保证金而言，保证金将完美运作。如果您的意思是边距将改变其位置，那么您就错了，它不会
边距：0 auto
意味着垂直方向上没有边距，浏览器应该选择一个水平@nunnerst，需要20名开发人员一起工作或自己工作20小时。好的，这是相同的，您只需创建一个div并将其高度设置为屏幕高度的最大值，然后添加
overflow:scroll
我刚刚添加了
溢出：滚动
，并添加了几个词来让它工作：）这很简单，你可以改变背景，呵呵，我已经为你添加了一个使用纯JavaScript的解决方案。我认为这将是目前最好的跨浏览器解决方案。我还包括了调整浏览器大小时的调整代码。@user2847429请检查我的答案。@user2786485请检查更新的小提琴。他不需要这个！他只需要一个滚动条，一个简单的页脚和页眉，它们会固定在自己的位置上，我希望页眉能固定在顶部。我只是想让内容区可以滚动，你可以让滚动条出现在内容区内吗。我不想把它放在正文上。@user2847429为此，您必须使用javascript或jquery。
div {
 max-height: 100px;
 min-height: 100px;
}

overflow: scroll; 

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

#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}

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