58

我正在努力从使用表格进行布局转移到使用 div（是的，是的，这是一场大辩论）。我有 3 个 div、页眉、内容和页脚。页眉和页脚各为 50 像素。如何让页脚 div 留在页面底部，以及让内容 div 填充两者之间的空间？我不想硬编码内容 div 的高度，因为屏幕分辨率可以改变。

4

7 回答 7

37

弹性盒解决方案

使用 flex 布局，我们可以实现这一点，同时允许自然高度的页眉和页脚。页眉和页脚都将分别贴在视口的顶部和底部（很像原生移动应用程序），主要内容区域将填充剩余空间，而任何垂直溢出都将在该区域内滚动。

见 JS 小提琴

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}
于 2016-07-28T04:40:17.490 回答
35

总结一下（这来自 Traingamer 提供的CSS Sticky Footer链接），这就是我使用的：

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>
于 2008-10-16T23:13:03.427 回答
8

要扩展 Mitchel Sellers 的答案，请给您的内容 div height: 100% 并给它一个自动边距。

有关完整说明和示例，请参阅 Ryan Fait 的CSS Sticky Footer。

由于您知道标题的大小（高度），请将其放在内容 div 内（或使用边距）。

如果您的内容比窗口大（高），绝对位置会给您带来问题。

于 2008-10-16T16:58:33.883 回答
2

使用 CSS Grid 的一种方法：

索引.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}
于 2018-07-03T06:16:39.583 回答
0

使用 CSS 网格，几乎所有浏览器都支持它

html{
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    height: 100%;
}

.main-body{
    display: grid;
    /* let content auto to occupy remaining height and pass value in fit-content with min-height for header and footer */
    grid-template-rows: fit-content(8rem) auto fit-content(8rem);
    grid-template-areas: "header" "main" "footer";
}

.main-header{
    background-color: yellow;
    grid-area: header;
}

.main-content{
    grid-area: main;
}

.main-footer{
    background-color: green;
    grid-area: footer;
}
<body class="main-body">
    <header class="main-header">
        HEADER
    </header>
    <main class="main-content">
        this is content
    </main>
    <footer class="main-footer">
        this is footer
    </footer>
</body>

于 2020-06-13T19:30:15.550 回答
-4

如果你想最大化你的内容 div 的高度，在 CSS 添加

高度：100%；

于 2008-10-15T22:02:27.110 回答
-9 
#footer {
 clear: both;
}
于 2008-10-16T17:25:46.280 回答