我有一个简单的2列布局,带有一个脚注,可以清除标记中的左右div。我的问题是,我不能让页脚留在所有浏览器的页面底部。如果内容向下推页脚,它就会起作用,但情况并不总是如此。
当前回答
查看http://1linelayouts.glitch.me/,示例4。Una Kravets解决了这个问题。
这将创建一个带有页眉、主页和页脚的3层页面。
-你的页脚将始终停留在底部,并使用空间来适应内容;
-你的标题将始终保持在顶部,并使用空间来适应内容
-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间),如果需要,足够填满整个屏幕。
HTML
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
CSS
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
其他回答
我没有任何运气在这一页上建议的解决方案,但最后,这个小技巧成功了。我将把它作为另一种可能的解决方案。
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
CSS:
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id="container">
<div class="footer">
</div>
</div>
如果你正在寻找一个在页面底部对齐的响应性页脚,它总是保持视口高度的80%的上距,那么这个方法应该是有用的。
要获得一个粘性页脚:
为你的内容设置一个<div> with class="wrapper"。 在包装器的</div>结束之前放置 < div class = "推" > < / div >。 在包装器的</div>结束后放置 < div class = "脚注" > < / div >。
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
我发明了一个非常简单的解决方法,对我来说非常有用。您只需在div中包装除页脚之外的所有页面内容,然后将min-height设置为视点减去页脚高度的100%。不需要在页脚或多个包装器div上进行绝对定位。
.page-body {min-height: calc(100vh - 400px);} /*将400px替换为页脚高度*/
如果你不希望它使用位置固定,并在移动设备上烦人地跟随你,这似乎对我来说是有效的。
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
只需要将html设置为min-height: 100%;位置是相对的,位置是绝对的;底部:0;左:0;在页脚。然后确保页脚是主体中的最后一个元素。
如果这对其他人不起作用,请告诉我,以及为什么。我知道这些乏味的风格技巧在我没有想到的各种情况下会表现得很奇怪。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?