如何防止页脚占据太多高度？ [复制]

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%

html {
    height: 100%;
}

    body {
        margin: 0;
        text-align: center;
        height: 80%;
    }
    footer {
        background-color: #003162;
        padding: 5px;
        height: 20%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80%;
    }

Answer 2

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

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