How to define the height of the main div auto?

Question

<header>Title</header>

<div class="main-wrapper">
  <h1>content</h1>
</div>

<footer>Footer</footer>

How can I define the height of the main-wrapper so that the content covers the whole page and the footer stays at the bottom of the page. Even if there is very less content in main-wrapper div.

Possible duplicate of [CSS to make HTML page footer stay at bottom of the page with a minimum height](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height) — UncaughtTypeError, Jan 12 '18 at 07:52
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Temani Afif, Jan 12 '18 at 07:53

score 0 · Answer 1 · answered Jan 12 '18 at 07:40

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
  padding: 70px 0;
}

<body>
    <div id="header"></div>
        <div id="content"><div>
        Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content Content Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content CoConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content ConContent Content Content Content Content nContent Content Content Content Content 
        </div>
    </div>
    <div id="footer"></div>
</body>

score 0 · Answer 2 · answered Jan 12 '18 at 07:45

You're missing a body first of all.

But anyways, here is your answer, using flexboxes (change the height of the container to see how it behaves) :

.container {
  display: flex; 
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  align-content: center;
  height: 600px;
}

.main-content {
  flex: 1 1 auto;
  background: lightblue;
  padding: 15px;
}

.footer {
  flex: 0 0 60px;
  line-height: 30px;
  padding: 15px;
  background: lightgray;
  box-sizing: border-box;
}

<div class="container">
  <div class="main-content">
    This is the main content, background is lightblue
  </div>
  <div class="footer">
    This is the footer, background is lightgray
  </div>
</div>

score 0 · Answer 3 · answered Jan 12 '18 at 07:56

0

If you want the main-wrapper content to cover whole page, you should set the height of to the main-wrapper to 100%. Then you should set the height of html and body to 100% as well.

CSS

.main-wrapper{
height: 100%;
}
body, html {
height: 100%;
}

answered Jan 12 '18 at 07:56

Abhilash Ravindran C K

1,818
2
13
22

score -1 · Answer 4 · answered Jan 12 '18 at 07:40

-1

.main-wrapper{
position:relative;
height:calc(100vh - 80px);
background-color:orange;
}

<header>Title</header>

<div class="main-wrapper">
    <h1>content</h1>
</div>


<footer>Footer</footer>

vh= viewport height (i.e. height of page is regarded as 100vh), so use calc and set height accordingly

answered Jan 12 '18 at 07:40

Akshay Vijay Jain

13,461
8
60
73

This solution fixes the height of your wrapper, meaning that whatever you do, your wrapper will always take 80% of the page, and you will have to scroll in it. This fixes the footer to the bottom of the page, something can simply be achieved with a `position: fixed` – Jan 12 '18 at 07:47

How to define the height of the main div auto?

4 Answers4