Question

我有一个相当标准的页面布局 - 标题，包含内容和页脚的div

    <header>
        <div id="banner">
        Header
        </div>
        </header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

我希望页脚部分占用HTML页面上的剩余高度，以便我应用这些样式

html {
    height: 100%;
}

body {
    margin: 0;
    text-align: center;
    height: 100%;
}


footer {
        background-color: #003162;
        padding: 5px;
        height: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80%;
}

footer, footer a {
        color: #fdb515;
}

奇怪的是页脚占用了太多空间。即使这不是我要求的内容，它也会导致滚动 - https://jsfiddle.net/g7Ldc7pt/2/。如何告诉页脚占用剩余的可见空间？如果内容不可见，我只想要一个滚动条，但它就在那里。

Answer 1

将一些内容添加到页面后，它看起来会更好。 https://jsfiddle.net/g7Ldc7pt/3/此外，不要使页脚的高度为100％，而是使其达到20％

{{1}}

Answer 2

＆＃13;

html, body {
  height:100%;
  margin:0;
}

section {
  display: flex;
  flex-flow:column;  
  height: 100%;
}
header {  
  background: tomato;
}
div {  
  background: gold;
  overflow: auto;
}
footer {
  flex: 1 1 auto;
  background: lightgreen;  
}

＆＃13;

<section>
  <header>
    header: sized to content
    
  </header>
  <div>
    main content: sized to content
   x<br>x<br>x<br>x<br>x<br>
    
   
  </div>
  <footer>
    footer: remaining height
  </footer>
</section>

＆＃13;

如何防止我的页脚占用太多高度？

2 个答案: