Menu
I have a header fixed to the top of the page that can wrap creating more height when the page is resized to a smaller width.
How do I make the the page content (#wrapper) always begin at the bottom of the header with CSS only?
<body>
<header>
This fixed content will wrap on small devices.
</header>
<div id="wrapper">
This content should always begin immediately below the header.
</div>
<body>
757
As you only want to use CSS, you could just set padding-top on your #wrapper div so it moves the content below the bottom of the header. Then adjust the padding-top size for each screen size in media queries.
175
...As already stated in the comments above, you have to use a JS solution, unless you are able to know at which resolutions the fixed header's height increases in which case you can use media queries and either use padding-top for the #wrapper element equal to the fixed header's height, or use an empty element with height equal to the header's.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
