Get div to take up 100% body height, minus fixed-height header and footer [duplicate]

by

this version will work in all the latest browsers and ie8 if you have the modernizr script (if not just change header and footer into divs):

Fiddle

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}
<div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div>

Scrolling with content: Fiddle

More Related Contents:

  1. Detect the type of font that is displayed in an image [closed]
  2. Transitions on the CSS display property
  3. How to use HTML to print header and footer on every printed page of a document?
  4. Responsive css background images
  5. Any way to declare a size/partial border to a box?
  6. Add a CSS border on hover without moving the element [duplicate]
  7. How to prevent long words from breaking my div?
  8. Scrolling a flexbox with overflowing content
  9. Font Awesome 5 – why aren’t icons like bitcoin, facebook, twitter showing?
  10. CSS Page-Break Not Working in all Browsers
  11. Does css hover work on mobile devices?
  12. What’s the difference between CSS classes .foo.bar (without space) and .foo .bar (with space) [duplicate]
  13. My CSS is not getting injected through my content script
  14. CSS Styling Checkboxes
  15. Double border with different color [duplicate]
  16. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  17. background image, linear gradient jagged edged result needs to be smooth edged
  18. CSS: 100% width or height while keeping aspect ratio?
  19. Sass @each with multiple variables
  20. CSS: Width and Max-Width
  21. Is the :before pseudo-element allowed on an input[type=checkbox]?
  22. Why doesn’t min() (or max()) work with unitless 0?
  23. Table column sizing
  24. How to create a radial menu in CSS?
  25. Overlay a background-image with an rgba background-color
  26. What does @-moz-document url-prefix() do?
  27. CSS select multiple descendants of another element
  28. Select all ‘tr’ except the first one
  29. How can I align 3 divs side by side?
  30. How to override the properties of a CSS class to avoid copying and renaming styles

Leave a Comment