Make A Div To The Bottom Of The Page

May 27, 2024 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;
}

<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):

Baca Juga

.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;

}

Html5 Guru

Make A Div To The Bottom Of The Page

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Make A Div To The Bottom Of The Page"