Right sidebar match content height?

[jeverington]

Hi,

I’m trying to achieve the following layout for a website i’m working on.

The layouts consists of a navbar, content, right sidebar (news) and footer. I want the sidebar to always be the height of the content and if the sidebar content is greater than the content height it should scroll.

I’ve currently got a layout where the sidebar pushes down the footer, but without setting a manual height on the sidebar it will always be longer than the content.

How could I best achieve this?

Thanks

Jamie

[Paulie_D]

Perhaps you could show us a reduced example in a Codepen.io demo.

[jeverington]

Hi Paulie

I’ve tried to represent what i’m after.

This is what I have currently

This is what I want, but without having to set the height

Thanks

Jamie

[Paulie_D]

if the sidebar content is greater than the content height it should scroll.

See….this is the hard part….equal heights have a lot of options (display:table-cell for instance & javascript) but you’re putting conditions like a scroll on means there has to be some way that the browser would ‘know’ that the sidebar is taller than the content and, AFAIK, CSS can’t do that.

Whether you could do some clever wrapping in extra divs or something with positioning and restricting it that way…I dunno….but it doesn’t sound “friendly” to me.

I’d have to think.

[Paulie_D]

Hmm…ugly but it works.

http://codepen.io/Paulie-D/pen/oDbdH

Whether you can adapt it, I dunno.

[jeverington]

Thanks Paulie,

Thanks for the sample. Not sure if that is workable for me. Will have to go down the JavaScript route I think. Cheers again!

[dflores009]

nm, just realized my solution was the same as Paulie_D.

[Author]

Posts