Question

无法获得我正在为我的投资组合网站创建的页面的工作布局。我有导航标题（固定大小div）。然后我有内容div 我有页脚

<div>header</div>
<div>content</div>
<div>footer</div>

我希望页脚是固定大小，比方说200px，总是固定在页面底部。但内容应填充从页眉到页脚的所有剩余空间。所以内容div高度取决于窗户高度。通过更改高度，只有内容div会改变大小。

Answer 1

header {
    width: 100%;
    position: fixed;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    min-height: 5%;
}

    header :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

article {
    top: 55px;
    width: 100%;
    height: 90%;
    position: fixed;
}

footer {
    top: 95%;
    min-height: 5%;
    width: 100%;
    position: fixed;
    padding: 10px 15px;
    background-color: #9f0d0d;
    color: #f5f5f5;
    border-top: 1px solid #ddd;
}

    footer :first-child {
        vertical-align: middle;
        margin-top: auto;
        margin-bottom: auto;
    }

.centre {
    text-align: center;
}

<div class="centre">
  <header>Header</header>
  <article>Remaining space</article>
  <footer>Footer</footer>
</div>

Answer 2

flex让它变得简单：

body {
  margin:0;
  height:100vh;
  /* eventually : min-height: xx ; to avoid main to be squeezed down to zero  in between header and footer */
  display:flex;
  flex-flow:column;
  }
.main {
  flex:1;/* fills remaining space */
  overflow:auto;/* comes handy */
  background:lightgray;/* see me */
  }
  div {
  padding:1em;/* whatever */
  }

<div>header of any height</div>
<div class="main">content</div>
<div>footer of any height</div>

html页面布局，内容div高度填充所有剩余空间

2 个答案: