CODEWITHSUNDEEP
htmlcsslayoutflexboxvertical-alignment
HartleySan
HartleySan

Reputation: 7810

How do I get this layout (using CSS flexbox)?

I have the following markup:

<div class="container">
    <div class="strip">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>

And I'm trying to figure out what CSS I need to add in order to get the content area to fill up whatever vertical space isn't taken up by the strip or the footer.

Please note that the container is position: fixed with top: 0 and bottom: 0 so that the container takes up 100% the height of the browser window. Also, the strip has a set height, but the footer does not (nor can it, as the content is somewhat dynamic). However, I want the footer to take up the minimum amount of space required and have the content area fill up the rest of the vertical space on the page.

I'm thinking that I need to use flexbox to do this, but I'm not sure.

Here's the CSS I have thus far:

.container {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
}

.strip {
    background: red;
    height: 5px;
}

.content {
}

.footer {
}

Upvotes: 0

Views: 48

Answers (2)

user6690414
user6690414

Reputation:

You could do this without the use of flexbox...

Here is the code:

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  background-color: red;
  height: 100vh;
  width: 100vw;
}

.strip {
  height: 20%;
  background-color: green;
}

.content {
  height: auto;
  background-color: blue;
}

.footer {
  height: 20%;
  width: 100%;
  background-color: black;
  position: absolute;
}
<div class="container">
  <div class="strip">
  </div>
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

The Strip and Footer have fixed heights (this height can be changed). The Content will increase height when stuff is added to the div. The content div will fill the space between the strip and footer.

Upvotes: 0

The24thDS
The24thDS

Reputation: 164

I hope this is what you wanted :) Without width or right set your container will basically have 0 width. .strip is positioned at the start of the container and .footer at the end. .content is allowed to stretch but won't stretch more than his neighbors without the flex-grow property which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.strip {
  justify-self: flex-start;
  background: red;
  height: 5px;
}

.content {
  justify-self: stretch;
  background: blue;
  flex-grow: 1;
}

.footer {
  justify-self: flex-end;
  background: yellow
}
<div class="container">
  <div class="strip">
  </div>
  <div class="content">
    test
  </div>
  <div class="footer">
    footer
  </div>
</div>

Upvotes: 2

Related Questions