CODEWITHSUNDEEP
htmlcssflexbox
Sachin
Sachin

Reputation: 2775

How to make div access the remaining space without using fixed height values?

I like the idea of flexbox very much, I use it for making my site responsive.

But now I'm very much confused.

What I want to do is:

I want to make the content-body access the remaining space. I tried using height: 100% but then nothing happens, then I tried to give a height: 100% to its parent content-wrapper then it overflows the main-content:

I want to know:

  1. why this happens and
  2. How to overcome it.

Note :The site should be responsive.

I created a nice jsFiddle to explain my situation. http://jsfiddle.net/bqpxd3y4/2/

    <body>
      <div class="main-container">
         <div class="main-header">
           HEADER
         </div>
         <div class="main-content">
         <div class="content-wrapper">
             <div class="content-head">
                 Content Head
             </div>
               <div class="content-body">
              CONTENT-BODY
            </div>           
         </div>
         </div>
         <div class="main-footer">
           FOOTER
         </div>
      </div>
    </body>

CSS

@CHARSET "ISO-8859-1";
body,html{
  margin:0;
    width:100%;
    height:100%;
    //font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family:"Trebuchet MS !important";
  background-color:#00b3b3;
}
.main-container{
    display:flex;
    flex-direction:column;

    flex-wrap:nowrap;
    height:100%;
  width:100%;
  box-sizing:border-box;
}
.main-header{
    background-color:#099;
    height:10%;
}
.main-footer{
    background-color:#099;
    height:10%;
}
.main-content{
    background-color:#fff;
    height:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
}
.content-wrapper{
  background-color:#80ccff;
  margin:1em;
  display:flex;
  flex-direction:column;
  height:100%;
}
.content-head{
  background-color:red;

}
.content-body{
  background-color:green;
  height:100%;
}

Upvotes: 2

Views: 113

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372149

Two things:

  • You've given your header and footer each a height: 10%. So when defining the height of the main content, use height: 80%. This prevents the overflow.
  • Use flex: 1 to tell flex items to consume all available space in the container.

body,html{
    margin:0;
    height:100%;
    background-color:#00b3b3;
}

.main-container{
    display:flex;
    flex-direction:column;
    height: 100%;
    /* width: 100%; */
    box-sizing:border-box;
}

.main-header{
    background-color:#099;
    height:10%;
}

.main-footer {
    background-color:#099;
    height:10%;
}

.main-content {
    background-color:#fff;
    height: 80%; /* main content - less header - less footer */
    display:flex;
}

.content-wrapper {
    background-color: #80ccff;
    margin: 1em;
    display: flex;
    flex-direction: column;
	
}
.content-head{
  background-color:red;

}
.content-body{
  background-color:green;
  flex: 1;
}
<div class="main-container">
    <div class="main-header">HEADER</div>
    <div class="main-content">
        <div class="content-wrapper">
            <div class="content-head">Content Head</div>
            <div class="content-body">CONTENT-BODY</div>           
        </div>
    </div>
    <div class="main-footer">FOOTER</div>
</div>

jsFiddle

Learn more about the flex property here:

Upvotes: 2

Related Questions