Menu
I am trying to create a layout here which looks like the following: Here's the fiddle
<body>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
This is the content section
</div>
<div class="stream-content">
This is the stream content.
</div>
<div class="push">
</div>
</div>
<div class="footer">
</div>
<body>
I want the content section to take up the full space between the header and footer section. There is an additional section called [stream-content] which if there (will be there only on home page) has to take the position just before the footer. And in that case, the content section should take up space all the between header and stream-content section. I tried doing the same with absolute positioning but all my elements were going haywire, so wanted to understand the correct way of doing this. Thanks in advance for all help!
411
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
First set the min-height of body to 100vh. min-height: 100vh; . Set the body display to flex display: flex; and flex-direction to column flex-direction: column; . Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .
Wrap the whole container in another element with position:relative and place the absolute element in it. The container should have position: relative to let the child make use of position: absolute .
To make an element sticky, do: make_sticky('#sticky-elem-id'); When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element.
Add position:relative to your wraper class.
Add position:absolute;bottom:0; to the stream-content class.
Check it here. Fiddle
150
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
