基金会6中的粘性页脚
问题描述:
我一直在使用基础框架获得粘性页脚以响应页面的一些问题。看起来页脚并不认识文章内容的高度。我试图搞定位,javascript解决方案和常见的CSS解决方案,但似乎没有解决。任何线索可能会出错?我猜测我看到的东西超级明显,但找不到它!基金会6中的粘性页脚
下面的代码:https://codepen.io/bublitzd/pen/grqPBp
header {
width: 100%;
height: 75vh;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
overflow: hidden;
background-color: #D7DDE3;
z-index: 0;
}
article {
width: 100%;
height: auto;
position: relative;
top: 65vh;
z-index: 1;
margin-bottom: 5vh;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
background-color: #000000;
z-index: 3;
}
答
这是所有你正在做的定位造成的。只要删除所有的定位和z-索引,并使用正常的元素顺序。对于*文章,您可以设置负顶边距以获得重叠:
header {
width: 100%;
height: 75vh;
overflow: hidden;
background-color: #D7DDE3;
}
article {
width: 100%;
height: auto;
margin-top: -10vh;
margin-bottom: 5vh;
}
footer {
width: 100%;
height: auto;
background-color: #000000;
}
谢谢!我认为这是沿着这些路线的东西,但我的大脑开始逃避。这工作! –