Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

Make A Div To The Bottom Of The Page

Post a Comment
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;
}
<div class="root">
  <div class="menu">
    menu
  </div>

  <div class="main-content-root">
    <div class="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 fixed solution (Out of the flow):

.main-content-root {
    position: fixed;
    bottom: 0;
}

For an sticky footer solution (Growing down): 

html, body, .root {
  height: 100%;
}

.menu {
  min-height: 100%;
  margin: 0 auto;
}

For absolute position solution (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>
        <div class="menu">
            <!-- All the page content -->
        </div>
        <div class="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"