Make A Div To The Bottom Of The Page
I want the main-content-root to go to the bottom of the page. Not shorter and not longer. I look for a solution where the divs before main-content-root are not altered. Only css pr
Solution 1:
Flex can be used here : do not hesitate to open snippet un full page and play around resizing window :)
html,/* 100% inherited from widow's height , then the cascade will take it to .rrot */body,
.root{
height: 100%;
width: 100%;
margin: 0;
}
.root {
display: flex;
flex-flow: column;
}
.menu {
background-color: red;
height: 50px; /* 200 is too much to show in snippet ... */
}
.main-content-root {
flex: 1;
overflow: auto;
}
<divclass="root"><divclass="menu">
menu
</div><divclass="main-content-root"><divclass="content">
scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/>scroll content
<br/></div></div></div>
Solution 2:
For a fixedsolution (Out of the flow):
.main-content-root {
position: fixed;
bottom: 0;
}
For an sticky footersolution (Growing down):
html, body, .root {
height: 100%;
}
.menu {
min-height: 100%;
margin: 0 auto;
}
For absolute positionsolution (Growing up):
.main-content-root {
position: absolute;
bottom: 0;
}
Solution 3:
if the main-content-root div
can have fix height this will work, wrap all your page content in a div
<html><body><divclass="menu"><!-- All the page content --></div><divclass="main-content-root"></div></body></html>
css
html{
position:relative;
min-height: 100%;
}
html,body{
margin:0;
padding:0;
}
.menu{
margin-bottom:200px; /* Height of main-content-root*/
}
.main-content-root{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:200px;
}
Post a Comment for "Make A Div To The Bottom Of The Page"