我是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>
答案 0 :(得分：1)
如果你仍然考虑使用javascript。
var height = document.getElementById('content').offsetHeight;
document.getElementById("footer").style.marginTop = height+"px";body {
margin: 0;
}
#content {
//position: absolute; this line on purpose ?
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>
</body>
答案 1 :(得分：1)
我已将您的代码粘贴到codepen项目中，因此我们可以清楚地了解您想要的内容。 :)
我已从代码中移除了#content {position: absolute;}，我认为这是您想要的，请检查并告知我们。如果它没有改进我的答案：）
答案 2 :(得分：0)
这段代码应该将页脚强制到底部。
# Note I changed the #content to .content so that it wouldn't be commented out
html, body, .content{ height: 100%;}
body > .content{height: auto; min-height: 100%;}
.content{ padding-bottom: 3em;}
答案 3 :(得分：0)
您可以使用带有CSS http://www.w3schools.com/css/css_boxmodel.asp的Box模型关于您的元素并使用百分比作为div页脚，因此当您使用关于边距或填充元素的元素时，这将始终是相同的。像
这样的东西http://jqfundamentals.com/chapter/javascript-basics此链接可以帮助您了解使用JavaScript和CSS的元素