Issue
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 {
}
Solution
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>
Answered By - The24thDS Answer Checked By - Clifford M. (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.