CODEWITHSUNDEEP
jqueryhtmlcss
clankill3r
clankill3r

Reputation: 9543

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 prefered. Because the menu can vary in height I added some simple code that changes the height of the menu.

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


body {
  height: 100%;
  width: 100%;
}

.root {
  position: fixed;
  top: 100px;
  height: 200px;
  width: 100%;
}

.menu {
  background-color: red;
}

.main-content-root {
  position: relative;
  overflow-y: scroll;
}

.content {

}


setInterval(function() {$(".menu").css("height", Math.random()*200)}, 1000);

Upvotes: 0

Views: 470

Answers (3)

Amin K
Amin K

Reputation: 106

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;

}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

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>

Upvotes: 1

sospedra
sospedra

Reputation: 14734

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

Upvotes: 0

Related Questions