How to create a dynamic top margin using JavaScript?
Question
I'm very new to JavaScript and am trying to use it to give my footer a margin. I need the footer to be flush against the bottom of my content, which has a dynamic height (when the browser is resized, the content gets appropriately larger/smaller to fit text). Here's my code:
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 answers
solution1
1 2015-10-19 01:42:15
In case you still consider using 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>
solution2
1 ACCPTED 2015-10-19 01:47:21
I've pasted your code into a codepen project, so we can get an idea what you want clearly. :)
I've removed #content {position: absolute;} from the code, which i think made what you wanted, please check and let me know. If it didn't i will refine my answer :)
solution3
0 2015-10-19 01:37:13
This piece of code should force the footer to the bottom.
# 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;}
solution4
0 2015-10-19 01:54:32
You can use the Box model with CSS http://www.w3schools.com/css/css_boxmodel.asp about your element and use percentage for your div footer so when you use porcetages about the margin or padding in your element this will be always the same. Something like
footer{padding-bottom:10%;}
http://jqfundamentals.com/chapter/javascript-basics This link maybe can help you to learn about elements with JavaScript and CSS
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.