我正在尝试将带有按钮的 div 放置在具有填充的父 div 的底部。
预期的结果是按钮位于填充(绿色区域)的顶部。
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
a,
a:focus,
a:hover {
color: #fff;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("../img/blank.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
html,
body {
height: 100%;
}
body {
color: #fff;
text-align: left;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#mcontainer {
position: relative;
float: left;
padding: 10%;
width: 100%;
height: 100%;
}
#header h1 {
margin: 0px;
}
#header {
height: auto;
}
#footer .link-item a {
display: table-cell;
padding: 10px 10px;
border: 2px solid white;
}
#footer {
position: absolute;
top: auto;
bottom: 0%;
height: auto;
}
#footer .link-item:first-child {
border-spacing: 0px 10px;
margin: 10px 10px 10px 0px;
}
#footer .link-item {
border-spacing: 0px 10px;
margin: 10px 10px;
}<!DOCTYPE html>
<html lang="en">
<body>
<div id="mcontainer">
<div id="header">
<h1>Text</h1>
</div>
<div id="footer">
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
</div>
</div>
</body>
</html>如有任何帮助，我们将不胜感激。
最佳答案
绝对定位不考虑填充。一个可能的解决方案是在 .mcontainer 中添加另一个容器，它也有 position: relative。这样，内部容器将遵守填充，并且绝对定位的元素将位于内部容器的底部。
关于html - 绝对定位忽略填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37461611/