负边距从底部到页脚不起作用
负边距从底部到页脚不起作用
提问于 2018-12-04 02:08:07
我试图将页脚向下移动50px以移出屏幕，但负边距不起作用(什么都不动)，我也不太确定原因……
footer {
background: #111;
padding: 50px 0 100px;
text-align: center;
margin-bottom: -50px;
}下面是一个例子
body {
background: white;
margin: 0;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}<body>
<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
</body>
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-12-04 03:16:19
负边际运行良好，但并不是您所期望的。负边距--底部不会使元素移到外部。它将使父元素改为收缩。
下面是一个简单的例子：
.box {
border:5px solid #000;
}
.box div{
background:red;
height:200px;
margin-bottom:-50px;
}<div class="box">
<div></div>
</div>
正如你所看到的，由于负边距，父元素的高度小于它的子元素，并且我们有一个溢出。
这就是在你的例子中发生的事情，因为溢出是默认的滚动，所以你会一直看到页脚。添加一些边框，您将更好地看到：
body {
background: white;
margin: 0;
border:2px solid;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -50px;
}<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
为了隐藏溢出部分，只需调整overflow属性，您就会得到您想要的：
html {
overflow:auto;
}
body {
background: white;
margin: 0;
border:2px solid;
overflow:hidden;
}
section {
height: 100vh;
}
footer {
background: green;
padding: 50px 0 100px;
text-align: center;
color: white;
margin-bottom: -200px;
}<section>
Section 1
</section>
<section>
Section 2
</section>
<footer>
<div>
some content here
</div>
</footer>
如您所见，我添加了一个更大的负边距来缩小主体元素，并使所有页脚位于外部，然后使用overflow:hidden将其隐藏
Stack Overflow用户
发布于 2018-12-04 02:26:14
如果我没理解错你的问题，你想让一个页脚从视图中隐藏起来。
如果是，请尝试使用固定位置，将此添加到您的css中
position: fixed;
bottom: -50px;祝你好运，如果有帮助，请告诉我。
Stack Overflow用户
发布于 2018-12-04 02:27:31
使用transform而不是margin footer {transform: translateY(-50px);}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53599430
复制相关文章
相似问题
腾讯云开发者
