我是 JavaScript 的新手，正在尝试使用它给我的页脚留出空白。我需要页脚与我的内容底部齐平，它具有动态高度(调整浏览器大小时，内容会适当变大/变小以适合文本)。这是我的代码:
function footermargin() {
var height = document.getElementById('content').offsetHeight;
document.getElementById("footer").style.marginTop = "height";
}body {
margin: 0;
}
#content {
position: absolute;
z-index: -1000;
margin-top: 35px;
width: 100%;
margin-left: 0;
margin-right: 0;
height: auto;
background-color: blue;
color: white;
}
#footer {
color: white;
background-color: #134;
margin-top: auto;
z-index: -9999999;
position: static;
width: 100%;
-webkit-box-shadow: inset 0px 10px 19px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 10px 19px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 10px 19px 0px rgba(0, 0, 0, 1);
}<body>
<div id="content">this is the content of the webpage. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed lacus libero. Duis tristique fringilla purus, a blandit arcu lacinia in. Phasellus quis lobortis justo. Proin fringilla nulla nisl, at fringilla metus maximus quis. Donec ultricies fringilla felis, eget rhoncus neque mollis ac. Aliquam porta, odio sed ornare consequat, enim neque pharetra enim, sit amet luctus turpis odio id erat. Vivamus porttitor egestas nunc a maximus. Cras maximus et erat nec tincidunt. Nam eget lectus a lorem rutrum fringilla sit amet in lacus. Vestibulum nec pharetra lectus. Proin non quam quis mauris tempor varius ac eget purus. Quisque luctus leo ut libero sollicitudin, ac fringilla tellus lacinia.
</div>
<div id="footer">this is the footer of the webpage. I need this flush against the bottom of the content without using specific margins.</div>
<script>
function footermargin() {
var height = document.getElementById('content').offsetHeight;
document.getElementById("footer").style.marginTop = "height";
}
</script>
</body>最佳答案
我已经将你的代码粘贴到一个codepen元素中，所以我们可以清楚地了解你想要什么。 :)
我已经从代码中删除了 #content {position: absolute;}，我认为它满足了您的要求，请检查并告诉我。如果没有，我会完善我的答案:)
关于javascript - 如何使用 JavaScript 创建动态上边距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33205267/