By CSS, how to make page height not change when an element is moved down


Tags: html,css

Problem :

On one page, there are three elements:

<body>
    <header />
    <content />
    <footer />
</body>

"header"'s CSS definition is:

header {
    position: fixed;
    height: 40px;
}

In order to present the whole content, I define its CSS like:

content {
    margin-top: 40px;
}

And bottom's CSS:

footer {
    position: absolute;
    height: 100px;
}

Now, the whole page's height is 40px longer than 100% screen height even there is nothing contained in "content". How can I make the whole page height still be 100% of screen? Thanks a lot!



Solution :

Use padding-top on the "content" instead of margin.

Utilising box-sizing: border-box; is also recommended.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
header {
  position: fixed;
  width: 100%;
  height: 40px;
  background: rgba(255, 0, 0, 0.25);
}
.content {
  min-height: 100%;
  padding-top: 40px;
  background: rgba(0, 255, 0, 0.5);
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: rgba(0,0,255,0.5);
}
<body>
  <header></header>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur reprehenderit ratione eligendi debitis, atque facilis odit qui sapiente incidunt neque quod possimus illum alias harum dolorem, esse aperiam! Reprehenderit voluptatibus eos autem vel,
      distinctio ullam mollitia dolore est, laborum iste optio eaque illum velit quos illo, harum neque sunt quaerat.
    </p>
  </div>
  <footer></footer>
</body>

Note...the footer is still on top of the "content" div and will obscure any content there. Other options exist for more flexible footers.


    CSS Howto..

    Css: how to combine table and column specification into a single selector?

    How to not inherit CSS styles from parents? [duplicate]

    CSS dropdown submenu with dynamic width: how to align left?

    How to add a background image or theme through CSS?

    how to load an external css file if javascript is disabled

    How to force margins to be ready from js before document ready

    CSS box-shadow shows weird white region?

    How to Use jquery Animate() with .slideToggle() Between Two Classes

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    Change image src for product “showoff”

    How to set readonly property of textbox from css

    How to disable google translator plug in and set margin-top: to 0px for body element?

    How can I highlight position in nav bar for single-page website?

    HTML/CSS: how to put text both right and left aligned in a paragraph

    How to spin css cube each after each [closed]

    How to incorporate CSS into a table

    how to have a css in javascript when onsubmit trigger in another window?

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to hide a segment of my website using PHP

    How to display message inline

    How To Refer To CSS Background Image in Visual Studio?

    How to indent text in a select drop down option menu using PHP & CSS? [REDUX]

    How to style a SVG using CSS in javaFX FXML

    Selecting an adjacent's child… how?

    How can I create a status bar with bootstrap?

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    How to make my PHP code, display in html table?

    How do you prevent buttons from merging into each other with the .btn-group class in bootstrap?

    How to add a line break inside with CSS?

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more