页脚高度不填满屏幕?
我一直在多个设备上测试我的网站,并且在高分辨率的屏幕上测试时,页脚下方有所有额外的空白区域。页脚高度不填满屏幕?
如何让我的高度动态的,解决这个问题?
我的HTML如下:
<div class="contact">
<div class="content--container">
........
</div>
<div class="container">
<div class="columns is-multiline">
<div class="column is-12">
.......
</div>
</div>
</div>
</div>
<div class="footer">
......
</div>
尝试添加这些对CSS(这是从http://mystrd.at/modern-clean-css-sticky-footer/):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
对于HTML模板是:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
下一页选项是使用flexbox像这些例子:https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
在这些例子身体有class="Site"
和内容也有一类称为class="Site-content"
,看起来像这些:
<body class="Site">
<header>Your header</header>
<main class="Site-content">
<div> Text </div>
</main>
</body>
CSS这些例子如下:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
所使用的网站组件完整的源在这个例子中,你可以在这里找到:https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
一个快速和简单的解决方法是将最小高度添加到.contact元素。
假设它直接坐在内幕你的身体元素,如果你的页脚高度为200像素,你可以这样做:
.contact {
min-height: calc(100% - 200px);
}
这确实需要你的身体任一位置:静态的; (默认值)或最小高度为100%。
-
一个最小高度添加到您的身体像这样:
body { min-height: 100%; }
-
更改您的页脚
position
到absolute
这样的:.footer { position: absolute; }
-
位置,并添加宽度页脚像这样:
.footer { position: absolute; bottom:0; left:0; width: 100%; }
使页脚看起来像动态高度(如果页脚高度对你无关紧要)的另一种简单方法是通过更改主体的背景颜色以匹配页脚的高度。然后,您可以将其中一个容器的宽度设为100%,并应用不同的背景颜色。
这给你的内容和页脚的视觉分离,而无需定位或调整页脚的大小。
继承人是的CSS:
body {
background-color: tomato;
height: 100%;
}
header {
color: white;
padding: 20px;
}
.container {
background-color: white;
height: 200px;
padding: 20px;
width: 100%;
}
footer {
background-color: tomato;
color: white;
padding: 20px;
}
和HTML:
<header>
<h1>This is my header</h1>
</header>
<div class="container">
<p>This is my content</p>
</div>
<footer>
<p> this is my footer that looks like it has a variable height.</p>
</footer>
链接到一个工作示例: http://codepen.io/Brydave/pen/dNQJMb
我相信有几十个答案对SO这个问题 – Armin
你是否希望它始终固定在底部? – scoopzilla