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>

That sounds like the default behavior ... ?

user2182349
– user2182349

2015-10-19 01:33:22 +00:00
Commented Oct 19, 2015 at 1:33 — user2182349
– user2182349, Commented Oct 19, 2015 at 1:33

Nasik Shafeek · Accepted Answer · 2015-10-19 01:47:21Z

1

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 :)

http://codepen.io/anon/pen/MaOPmz

answered Oct 19, 2015 at 1:47

Nasik Shafeek

9611 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aliciasilhavy Over a year ago

This works, thanks! I had the position: absolute; because I thought it was required for centering.

Sahal Saad · Accepted Answer · 2015-10-19 02:23:10Z

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>

Regis · Accepted Answer · 2015-10-19 01:37:13Z

0

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;}

answered Oct 19, 2015 at 1:37

Regis

1745 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 19, 2015 at 1:54

UserEsp

4261 gold badge7 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to create a dynamic top margin using JavaScript?

4 Answers 4

1 Comment

Comments

Comments

footer{padding-bottom:10%;}

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

footer{padding-bottom:10%;}

Comments

Your Answer

Sign up or log in

Post as a guest

Related