代码之家 › 专栏 › 技术社区 › Nick Spacek

3行布局,页眉和页脚固定高度和流体内容,但滚动

css3 css html

1

Nick Spacek · 技术社区 · 15 年前

从前面的问题和他们缺乏答案来看,我不确定会有一个好的答案。幸运的是,我们只需要支持更新的浏览器。

<html style="height: 100%">
<body style="height: 100%">
<section style="height: 100%; display: table;">
  <header style="display: table-row; height: 200px;">
    Header
  </header>
  <section style="display: table-row; height: 100%; overflow-y: auto;">
    Content
  </section>
  <footer style="display: table-row; height: 200px;">
  </footer>
</section>
</body>
</html>

问题是,当content部分包含足够的内容,使其溢出时,内容不是滚动而是拉伸。我本来希望漂浮的内容可能会有所帮助,但也没有好处。

有什么想法吗?

3 回复 | 直到 15 年前

1

2

Jérôme Beau 9 年前

首先,如果希望固定页眉和页脚,则需要一个绝对(或固定)引用:

.container {   
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

那么最简单、最现代的表达顶部/拉伸/底部约束的方法就是使用 flex 沿绝对参照的全高,从上到下的流向显示:

.content {
   display: flex;
   flex-direction: column;
   height: 100%;
}

最后,定义flex内容及其对齐约束:

header {
   align-content: flex-start;
}
.fluid-and-scrollable {
    flex: 1;
    overflow-y: scroll;
}
footer {   
   align-content: flex-end;
}

(注意 flex-start flex-end 实际上并不需要,因为HTML中元素的自然顺序暗示了它们)。

当然,根据您的浏览器支持需求,您必须处理Flexible Box布局的专有/旧语法。

查看演示 here

编辑 :如果您想在整个视口上应用这样的布局,我不建议使用此解决方案,因为如果您不在视口上滚动,iOS将不会缩小其浏览器栏 body . 相反,我建议采用一种更为严格、老式的解决方案,将固定的页眉和页脚置于 (勾选此项 alternative 在移动Safari上查看差异)。

2

1

bpeterson76 15 年前

即使你只需要支持更新的浏览器,我认为有一个解决方案可以做所有浏览器(或至少大多数)。将其作为“页脚推送”解决方案。例如:

CSS格式:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML格式:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

所以,现在页眉和页脚是一个固定的大小,中间部分(称为文章)将填充屏幕,除非有更多的内容,在这种情况下,它会拉伸。如果修改,请注意包装器div的位置,它封装了页眉和正文,但不封装页脚。

3

1

Steve 12 年前

将Doctype设置为HTML(不要添加所有额外的内容)以将其分类为HTML5站点。

CSS格式:

* {
    margin: 0;
    padding: 0;
    line-height: 100%;
}

body {
    font: 1em Verdana, Geneva, sans-serif;
}

header {
    width: 100%;
    height: 150px;
    background-color: gray;
}

section {
    min-height: 100%;
    padding-bottom: 100px;
}

footer {
    width: 100%;
    height: 100px;
    background-color: #E0E0E0;
    position: fixed;
    bottom: 0;
    left: 0;        
}

HTML格式:

<body>

<header>
    header
</header>

<section>
        <strong>repeat to fill the page when you test overflow</strong>
            content. test the content. test the content. test the content. test the content. test the content. test the content.
</section>

<footer>
    footer
</footer>

</body>

如果您需要检查内容区域,只需在*中添加一个边框属性,颜色为绿色,这是在更改区域时查看区域位置的好方法。

如果有人不同意,就告诉我这有什么问题。我用它来启动和修改,如果需要的话。

[p.s.用IE、Chrome和Mozilla测试-还有。。。这将滚动页眉和内容,但不会滚动页脚。你总是可以使用与我处理页脚时相同的方法来处理页眉,但是在节的顶部添加一个与页眉高度匹配的填充]