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

Posted 2023-03-21

【中文标题】如何防止页脚占据太多高度？ [复制]

【英文标题】：How do I prevent my footer from taking up too much height? [duplicate]

【发布时间】：2018-09-27 20:22:39

【问题描述】：

我有一个相当标准的页面布局——页眉、带有内容和页脚的 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/ 。如何告诉页脚占用剩余的可见空间？如果内容不可见但全部都在那里，我只想要一个滚动条。

【参考方案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%;
    

【讨论】：

本着 SO 指导方针的精神，发布一个简单的例子，我把事情缩小了。我的问题的重点是如何使页脚占用尽可能多的空间但仅此而已？我不想为页脚指定任意高度，因为这不适用于所有情况。

【参考方案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>

【讨论】：

在这里您为标题和内容部分分配任意高度。有没有办法做到这一点而不这样做？我希望这些部分是其中内容的大小。

我在 sn-p 中进行了您正在寻找的更改。只需注释掉或删除这些部分的 CSS 高度 -

谢谢，但我为“页脚”高度设置了什么值？你有“高度：计算（15％ - 10px）;”但这似乎是对其他两个部分的旧高度值的保留。

您希望页脚有多大？如果没有内容，您是否希望它占据整个页面？当内容占用所有可用空间并创建滚动条时，您想做什么？页脚应该有多大？如果您需要更多帮助，请接受答案，我们可以在聊天中将其离线。您可以从页脚中删除高度，但这会给您带来同样的结果

总会有一个页眉和一些内容，但如果它占据了整个页面，那么页脚可以是任何高度。我要解决的主要用例是如果页面上有额外空间，我希望页脚占据剩余空间。