如何使用JavaScript创建动态顶部边距？
[英]How to create a dynamic top margin using JavaScript?
问题描述
我是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>
4 个解决方案
解决方案1
1 2015-10-19 01:42:15
如果您仍然考虑使用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>
解决方案2
1 已采纳 2015-10-19 01:47:21
我已将您的代码粘贴到Codepen项目中，因此我们可以清楚地了解您想要的内容。 :)
我从代码中删除了#content {position: absolute;} ，我认为它满足了您的要求，请检查并告知我。 如果没有，我将完善我的答案:)
解决方案3
0 2015-10-19 01:37:13
这段代码应将页脚逼到最底端。
# 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;}
解决方案4
0 2015-10-19 01:54:32
您可以将Box模型与CSS http://www.w3schools.com/css/css_boxmodel.asp结合使用，并在div页脚中使用百分比，因此当您在元素的空白处使用空白或填充时，将始终使用相同。 就像是
页脚{padding-bottom：10％;}
http://jqfundamentals.com/chapter/javascript-basics此链接可能可以帮助您了解JavaScript和CSS元素
如何在javascript中正确使用DOM样式的margin top属性？
[英]How to correctly use DOM style margin top property in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.