Needing 100% height on div

[ClericLady]

I’m struggling with getting my navigation bar to span the entire length of my page, regardless of my main content’s length. I’ve tried using flexbox, at the suggestion of @Beverleyh (thank you!! Your vacation is sounding fantastic!), and am not having any luck. What am I doing wrong?

http://thedappledlight.com/fygk

Also, and this aside reveals how ridiculously-green I am (as if the coding in the above link doesn’t), I’ve tried just posting my HTML/CSS in the blocks of inline code supported by this forum, and I can’t see it when I preview. Does it only show up when I post?

[Paulie_D]

You’re mixing up at least two layout methods…flexbox and position:absolute…you really shouldn’t do that unless it’s for a very specific reason.

We’re not really fans of dumping a lot of code into posts…we prefer a live demo where we can get our hands dirty and tinker with the code ourselves rather than a linked site such as you have provided.

We use a site created by Chris Coyier (who runs CSS-Tricks) called Codepen.io.

It’s awesome, free and really easy to use. It has sections for your HTML and CSS and any JS you might be using.

I’ll try and put something together later as a quick demo of what I think you are after but I’m pushed for time right now….maybe in a few hours.

You might also like – http://learnlayout.com/ and Chris also has some videos on flexbox and other layout methods right here that you might want to take a look at.

[JeroenR]

Yes, I agree with Paulie_D about the mixing of two techniques. And also when you try to use the flexbox technique, your flex settings should be on the container outside of the things you want to stretch. Take a look at this example: https://codepen.io/jeroenreijs/pen/vZLyrw.

[ClericLady]

Thanks for the fast replies. I’ll check out both of those links you each supplied. Maybe I don’t need flexbox to stretch the navigation bar? I want to keep my absolute positioning if possible because I need z-index to keep my content below the background image…. I’ll tinker this afternoon and post my attempts with codepen.

[Paulie_D]

because I need z-index to keep my content below the background image.

No..you really don’t…and nothing can be “below” a background image so I’m not clear on what you are actually trying to do.

Anyway, we can take a look later.

[ClericLady]

Thank you @JeroenR and @Paulie_D for being patient at my painful level of inexperience. I got rid of the conflicting codes and just made an image to solve my issue. Appreciate the help.

[Author]

Posts