css 如何创建div来填充页眉和页脚div之间的所有空间

xriantvc 于 2023-01-22 发布在其他

关注(0)|答案(8)|浏览(134)

我正在努力从使用表格布局到使用div（是的，是的，这是一个很大的争论）。我有3个div，一个页眉，内容和页脚。页眉和页脚各为50px。我如何让页脚div保持在页面底部，而内容div填充中间的空间？我不想硬编码内容div的高度，因为屏幕分辨率可以改变。

css

来源：https://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div

8条答案

按热度按时间

1dkrff031#

Flexbox溶液

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

超文本标记语言

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

中央支助组

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

赞(0）回复(0）举报 2023-01-22

a2mppw5e2#

总结一下（来自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>

赞(0）回复(0）举报 2023-01-22

fkaflof63#

要扩展Mitchel Sellers的答案，请给予您的内容div高度：100%，并给予它一个自动保证金。
有关完整的解释和示例，请参见Ryan Fait的CSS Sticky Footer。
既然你知道标题的大小（高度），就把它放在内容div里面（或者使用边距）。
如果你的内容比窗口大（高），绝对位置会给你带来问题。

赞(0）回复(0）举报 2023-01-22

iqih9akk4#

一种使用CSS网格实现此目的的方法：

- 索引. 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>

- 主文件. css**

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

赞(0）回复(0）举报 2023-01-22

fcy6dtqo5#

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

赞(0）回复(0）举报 2023-01-22

ugmeyewa6#

超文本标记语言

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

中央支助系统

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
    height: 10px;
  background: red;
  width: 100%;
}

footer {
    height: 10px;
  background: red;
  width: 100%;
}

这个css to body将确保页眉和页脚总是分别在顶部和底部。
把所有的内容放在main中。更进一步，你可以根据你的要求使页眉或页脚具有粘性。
检查此处的工作示例https://codepen.io/vishal657/pen/MWBOErq?editors=1100

赞(0）回复(0）举报 2023-01-22

axkjgtzd7#

如果你想最大化内容div的高度，在CSS中添加
高度：100%;

赞(0）回复(0）举报 2023-01-22

bwntbbo38#