[英]Height 100% and css issue with footer
I am currently working on a script and in some pages there isn't enough content.In this case I want the page to cover 100% of the browser and put the footer at the bottom.I tried many codes and nothing seems to work I ended up by having a code like this: 我目前正在编写脚本,在某些页面中没有足够的内容。在这种情况下,我希望页面覆盖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>
and css like this : 和css这样:
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
Here is my jsfiddle : https://jsfiddle.net/k8k7o36b/ 这是我的jsfiddle: https ://jsfiddle.net/k8k7o36b/
Any help will be appreciate. 任何帮助将不胜感激。 I'll be more than thankful if you add small explanation so I can understand what were I doing wrong.
如果你添加一些小解释,我会非常感激,所以我能理解我做错了什么。 Thanks
谢谢
#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>
This should do it. 这应该做到这一点。 I changed
div
to a footer
and added some styling to the #footer
id so that it has a position: absolute;
我将
div
更改为footer
并为#footer
id添加了一些样式,以便它具有一个position: absolute;
and bottom: 0;
和
bottom: 0;
. 。 You can look into what position: absolute does here .
你可以看一下这个位置:绝对在这里 。
Edit: Obviously, you can adjust the height of the footer however you want, I just set it to 100px and background-color orange so that we can see it better. 编辑:显然,您可以根据需要调整页脚的高度,我只需将其设置为100px和背景颜色为橙色,以便我们可以更好地查看它。
You can try with flexbox
: 您可以尝试使用
flexbox
:
100%
on html and body and also your footer
element at the same level of nav and core 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>
You can use a flex layout and set the main content area to flex-grow: 1
so it will consume all of the available space between your nav and footer, and that will push the footer to the bottom of the page when there isn't enough content. 您可以使用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>
You can use calculations in css to help with this. 您可以在css中使用计算来帮助解决这个问题。
#core {
height: (100vh - 55px)
}
100vh is 100% of the viewport, while he 55px is the height of the footer. 100vh是视口的100%,而55px是页脚的高度。 Add any other elements to the calculation if you give them a height also eg
如果你给它们一个高度,也可以在计算中添加任何其他元素
#header{
height: 45px
}
#core {
height: (100vh - 100px)
}
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>
Add these classes 添加这些类
html,body{
height:100%
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
Here is a generic flexbox
solution. 这是一个通用的
flexbox
解决方案。
flex-grow: 1;
tells main
to fill the remaining space. 告诉
main
填补剩余的空间。 This also has the benefit of not having to set a specific height on your footer. 这也有一个好处,就是不必在页脚上设置特定的高度。
*Some might support the 2012 syntax or require a prefix like -webkit-
*有些可能支持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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.