CODEWITHSUNDEEP
htmlcssflexbox
viery365
viery365

Reputation: 965

Style one single column with flexbox

Maybe I want something impossible. I want a website with only a single column styled with flexbox. The purpose is that only one column stretches its height to the footer regardless the size of the content of the column. Something like below structure:

enter image description here

I try to reach that with this code (I am using bootstrap):

<div class="container-fluid">
   <div class="row">  
     <header class="col-md-12">
       stuff...
     </header>
     <div class="col-md-1 col-a">
       stuff...
     </div>
     <div class="col-md-10 col-b">
       Stuff...
     </div>
     <div class="col-md-1 col-c">
        <div class="col-c-child">
          Stuff..
        </div>
     </div>
     <footer class="col-md-12">
       Stuff
     </footer>
   </div>
</div>

And then adding in the CSS this specific for the col-c and col-c-child:

.col-c {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.col-c-child {
  flex: 1;
}

But is not working. Any idea?

THE SOLUTION:

Thanks to @jelleB who elucidated me for part of it.

Upvotes: 2

Views: 26214

Answers (3)

Pete
Pete

Reputation: 58442

If you are able to wrap your middle divs, you can do the following:

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.container #body {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

header,
footer {
  width: 100%;
}

.left,
.right {
  width: 100px; /*change to whatever width you want*/
}

.center {
  flex-grow: 1;
}

/*styles for demo*/
header,
footer {
  height: 50px;
  background: blue;
}

.left,
.right {
  background: green;
}

.center {
  background: red
}
<div class="container">
  <header></header>
  <div id="body">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
  <footer></footer>
</div>

Upvotes: 2

jelleB
jelleB

Reputation: 183

  • Put the header and the footer in different rows.
  • You should build a div below col-a (without content)
  • Use min-height: 100% on the row where you put col-a/col-b/col-c in

Give this a shot

Upvotes: 5

Akshay Pardhanani
Akshay Pardhanani

Reputation: 122

I suspect your problem lies in the height:100%

If I am not mistaken, you cannot do that unless the parent container has its height defined. If the parent container's height is also defined as a percentage then the parent's parent container's height must also be defined. This hierarchy continues up to the body tag.

Upvotes: 1

Related Questions