CSS-如何创建div以填充页眉和页脚di之间的所有空间

我正在努力从使用表格进行布局过渡到使用div(是的,是的,是伟大的辩论)。 我有3个div,页眉,内容和页脚。 页眉和页脚各为50px。 如何使页脚div停留在页面底部,而内容div填充两者之间的空间? 我不想硬编码内容div的高度,因为屏幕分辨率会改变。

Jeremy asked 2019-11-18T04:26:28Z
6个解决方案
33 votes

总结一下(这来自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>
Jeremy answered 2019-11-18T04:27:34Z
29 votes

Flexbox解决方案

使用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;
}
Reggie Pinkham answered 2019-11-18T04:27:11Z
8 votes

要扩展Mitchel Sellers的答案,请为您的内容div高度设置:100%并为其自动设置边距。

有关完整的解释和示例,请参见Ryan Fait的CSS Sticky Footer。

因为您知道标题的大小(高度),所以将其放在content div中(或使用边距)。

如果您的内容大于窗口,则绝对位置会给您带来问题。

Traingamer answered 2019-11-18T04:28:22Z
1 votes

一种使用CSS Grid的方法:

的index.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%;
}
Allen answered 2019-11-18T04:28:54Z
-4 votes

如果您试图最大化内容div的高度,请在CSS中添加

高度:100%;

Mitchel Sellers answered 2019-11-18T04:29:26Z
-9 votes
#footer {
 clear: both;
}
Andy Brudtkuhl answered 2019-11-18T04:29:43Z
translate from https://stackoverflow.com:/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div