How do I use CSS to position a fixed variable height header and a scrollable content box?

by

Assuming by “fixed” you mean position:fixed, I don’t think it’s possible in pure CSS, as position:fixed takes the element out of the document flow.

However, it should just take a line or two of JavaScript to get what you want. Something like this (untested, only for example purposes, will need syntax tweaked to actually work):

var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

Something like that should get you the rendered height of the fixed <div> and set the content <div>‘s margin accordingly. You’ll also need to explicitly set a background color on the fixed <div>, otherwise the content will appear to bleed into the fixed one when scrolling.

More Related Contents:

  1. What is the difference between display: inline and display: inline-block?
  2. CSS selector based on element text? [duplicate]
  3. CSS @font-face not working with Firefox, but working with Chrome and IE
  4. Opacity of background-color, but not the text [duplicate]
  5. Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
  6. How to increase the gap between text and underlining in CSS
  7. Bootstrap with different order on mobile version
  8. How to style a div to be a responsive square? [duplicate]
  9. 3D CSS transform, jagged edges in Firefox
  10. Change the order of col-*-12 columns in Bootstrap using push/pull
  11. Expand div from the middle instead of just top and left using CSS
  12. How to make a element expand or contract to its parent container?
  13. Defining Variable Variables using LESS CSS
  14. How can I zoom an HTML element in Firefox and Opera?
  15. Binding in Control with “class” Attribute
  16. Chrome renders colours differently from Safari and Firefox
  17. How to remove outline border from input button
  18. Angular 2: How to style host element of the component?
  19. Bootstrap: Position of dropdown menu relative to navbar item
  20. How do you debug printable CSS?
  21. CSS3 3D Transform doesn’t work on IE11
  22. IE not rendering CSS properly when the site is located at networkdrive
  23. text flowing out of div
  24. Can I set the height of a div based on a percentage-based width? [duplicate]
  25. Can I make a CSS grid with dynamic number of rows or columns?
  26. Is it bad practice to prefix single lines of CSS with // as a personal comment style?
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  29. How do I make card-columns order horizontally?
  30. Disable CSS animation on pseudo element inherited from parent

Leave a Comment