Have content fill remaining screen-space

Question

I am trying to make a website with some basic functionality, which currently just includes a navigation bar and the main content area. I wish for this main content area to take up the remainder of the vertical screen space with the exception of a slight margin on the bottom.

I have tried setting my various containers heights to 100% and that hasn't seemed to work; I was told this is due to the parent element not having a height associated with it (The body element is the parent elements). I have searched around SO and found various answers, but I haven't been able to implement them successfully.

The post most noteworthy is this one: Make a div fill the height of the remaining screen space My issue is that I am hoping that there is a solution to do this without putting everything into an overarching flexbox container.

The following codepin is similar to what my current website looks like: https://codepen.io/anon/pen/LoxpoK?editors=1100

I wish for this section to be extended to the bottom of the page:

<section class="content-block center-content">
        <h1>
            PLACEHOLDER
            <br>
            FOR TEXT, AND
            <br>
            THINGS
        </h1>
</section>

make your body element to be the flex container since you applied 100vh to it — Temani Afif, May 14 '19 at 22:26
I will close as duplicate because the solution will be same and you don't have to exactly follow the same html structure .. you have to understand the trick of flexbox and you can have your own html structure — Temani Afif, May 14 '19 at 22:27
When I follow this structure, the elements get condensed and their width appears to be redefined, why would that be? @TemaniAfif — DeveloperRyan, May 14 '19 at 22:42
it's because of the margin:auto you are applying to the elements, you have to either remove it or add `width:100%` — Temani Afif, May 14 '19 at 22:46
@TemaniAfif Even after making the suggested change, I wasn't able to get the effect I wanted.I updated the codepen so you should be able to see what I have. I am trying to achieve an effect that looks identical to this: https://i.imgur.com/UxaNWTv.png — DeveloperRyan, May 14 '19 at 23:00
Thank you! That's more what I was going for. I don't completely understand why this works, do you think you could break it down for me? Also, what if I wanted to have full width background elements, yet keep content within the same area. That's why I had everything setup as I did before. https://i.imgur.com/rVkOt1c.png — DeveloperRyan, May 14 '19 at 23:17
it's all about flexbox, when adding flexbox the flex item will no more take 100% width like common block element but they will have a shrink to fit behavior like inline-block. So either you add width:100% or you remove anything related to centreing to keep the stretch default behavior of flexbox — Temani Afif, May 14 '19 at 23:20
to have a full width background, you can consider an extra element where you keep it 100% width and inside your restrict the width by applying max-width then you can add background to the outer div — Temani Afif, May 14 '19 at 23:21

Have content fill remaining screen-space

0 Answers0