页脚高度100％和css问题

Question

我目前正在编写脚本，在某些页面中没有足够的内容。在这种情况下，我希望页面覆盖100％的浏览器并将页脚放在底部。我尝试了很多代码，似乎没有任何工作我最后得到这样的代码：

<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
    <div id=content>
        <div id=tophea>
           TOP Content
        </div>
        <div id=msgs>
       MSG Content
        </div>
    </div>
    <div id="footer">
    Footer
    </div>
    </div>
</div>

和css这样：

#container{
  height:100%
}
#nav{
  height:55px;
}
#core{
  height:100%
}
#content{
  height:100%;
  background:red;
}

这是我的jsfiddle： https ：//jsfiddle.net/k8k7o36b/

任何帮助将不胜感激。 如果你添加一些小解释，我会非常感激，所以我能理解我做错了什么。 谢谢

Answer 1

 #container{ height:100% } #nav{ height:55px; } #core{ height:100% } #content{ height:100%; background:red; } #footer { background-color: orange; position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; overflow:hidden; } 

 <div class="container"> <div id=nav> NAV </div> <div id=core> <div id=content> <div id=tophea> TOP Content </div> <div id=msgs> MSG Content </div> </div> <footer id="footer"> Footer </footer> </div> </div> 

这应该做到这一点。 我将div更改为footer并为#footer id添加了一些样式，以便它具有一个position: absolute; 和bottom: 0; 。 你可以看一下这个位置：绝对在这里 。

编辑：显然，您可以根据需要调整页脚的高度，我只需将其设置为100px和背景颜色为橙色，以便我们可以更好地查看它。

Answer 2

您可以尝试使用flexbox ：

• 请注意，您需要在html和body上使用100% ， 并在导航和核心的同一级别使用您的footer元素

 html,body { margin: 0; height: 100%; } .container { background: orange; min-height: 100%; display: flex; flex-direction: column; } #nav { flex: 0 0 auto; height: 55px; } #core { flex: 1 0 auto; background: red; } 

 <div class="container"> <div id=nav> NAV </div> <div id=core> <div id=content> <div id=tophea> TOP Content </div> <div id=msgs> MSG Content </div> </div> </div> <div id="footer"> Footer <br> footer </div> </div> 

Answer 3

您可以使用flex布局并将主要内容区域设置为flex-grow: 1这样它将消耗导航和页脚之间的所有可用空间，并且当没有时，它会将页脚推到页面底部足够的内容。

 body, .container { min-height: 100vh; margin: 0; } .container, #core { display: flex; flex-direction: column; } #core, #content { flex-grow: 1; } 

 <div class="container"> <div id=nav> NAV </div> <div id=core> <div id=content> <div id=tophea> TOP Content </div> <div id=msgs> MSG Content </div> </div> <div id="footer"> Footer </div> </div> </div> 

Answer 4

您可以在css中使用计算来帮助解决这个问题。

#core {
    height: (100vh - 55px)
}

100vh是视口的100％，而55px是页脚的高度。 如果你给它们一个高度，也可以在计算中添加任何其他元素

#header{
    height: 45px
}
#core {
    height: (100vh - 100px)
}

Answer 5

 html,body,#container{ height:100% } #nav{ height:55px; } #core{ height:100% } #content{ height:100%; background:red; } #footer{ position:absolute;bottom:0; right:0;left:0 } 

 <div class="container"> <div id=nav> NAV </div> <div id=core> <div id=content> <div id=tophea> TOP Content </div> <div id=msgs> MSG Content </div> </div> <div id="footer"> Footer </div> </div> </div> </div> 

添加这些类

html,body{
  height:100%
}

#footer{
  position:absolute;bottom:0;
  right:0;left:0
}

Answer 6

这是一个通用的flexbox解决方案。

flex-grow: 1; 告诉main填补剩余的空间。 这也有一个好处，就是不必在页脚上设置特定的高度。

Flexbox支持

• Chrome 21+
• Firefox 28+
• IE 10+
• 边缘
• Safari 6.1+

*有些可能支持2012语法或需要像-webkit-这样的前缀

 html { height: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100%; } header { background-color: indianred; } main { flex-grow: 1; background-color: skyblue; } footer { background-color: gold; } 

 <header> Header </header> <main> Content </main> <footer> Footer </footer>