CSS bottom up design challenge

[bdeschryver]

Hey guys,

I am getting crazy trying to achieve a rather complicated design using CSS or maybe JQuery ?
Here it is:

3 divs/sections that are one after the other from top to bottom (all of them take 100% width):
– The bottom one is below the 2 top ones.
If the middle one has a lot of content, it goes below the viewport bottom and a vertical scrollbar will be needed for the global set.
If the middle one has small content, it has to stick to the bottom of the page (as a footer) (no vertical scrollbars then)

• the middle one contains the text and varies in size according to the content
• the top section has to grow adequately with the 2 others (it is a kind of filler): 1px height if the bottom sections fill more than the viewport size; or if the middle section has short content, fill the space between the top of the viewport and the beginning of the middle section (which is stuck to the bottom one which sticks to the bottom of the viewport).

See what I mean ?

In summary:
– a lot of content in the middle section: looks like a normal simple website with a vertical scrollbar; top section is small
– small content in middle section: bottom section sticks to the bottom of viewport, middle one on top, and top one streches to the top of navigator.

Any idea how to achieve this ??

THANKS !!!

[Paulie_D]

Any idea how to achieve this ??

A shipload of Javascript would be my best guess.

I’d need to see design images of how this is supposed to look at various heights and content amounts to even think about it because I don’t think your description(s) are adequate for me to grasp what you are trying to do.

[bdeschryver]

Hey Paulie D,

how can I send you some screenshots to illustrate this ?

[Paulie_D]

how can I send you some screenshots to illustrate this ?

Host them online, I use Photobucket.com but there are other free services that will host them for you and provide a direct link to each.

Then you can just provide the links here as hyperlinks or as actual img tags like any other html.

Like this

[bdeschryver]

Hey,
sorry for the delay…
I managed to get two screen shots of what I am trying to achieve:
please find image 1 : http://i1373.photobucket.com/albums/ag386/bdeschryver/V2_accueil_grand_ecran_zps3dd0d28b.jpg
and image 2: http://i1373.photobucket.com/albums/ag386/bdeschryver/V2_accueil_petit_ecran_zpsa4f42962.jpg

As you can see on image 2: the design on a small screen
On image 1 how it should look like on a big screen.
What I want to achieve is to have the bottom grey banner always at the bottom of the windows/site, and the left/upper grayish bands to expand until the top/left.
Of course, if there is more text/content than the window can display, I should have a vertical scroolbar.
Any idea how to do this?

THANKS !

[Paulie_D]

Offhand, a full page slider (that is meant to be a slider right) with a positioned footer might be a good place to start.

What I want to achieve is to have the bottom grey banner always at the bottom of the windows/site,

There are various techniques for that…absolutely positioned div might be a start.

and the left/upper grayish bands to expand until the top/left.

You mean the background to the “Avocat Delwart” text?

That could be any image or anything. It’s hard to tell from an image.

It doesn’t look too difficult. Is this an actual site or just a mock-up?

What have you tried so far?

[bdeschryver]

I have tried so many things but cannot manage to get it working.
The bottom gray banner has to be positionned at the bottom of the screen if the middle content is small (not longer than viewport) and it has to be at the bottom of the site (outside the viewport) if the middle content is long (with vertical scrollbar).
I did find some tricks using javascript for this, but then the remaining issue is how to have the middle div stick the bottom banner and the upper div stick to the middle one and fill up the available space to the top of the page ?

[Paulie_D]

If you show us what you have tried perhaps in a reduced version in Codepen.io we can make some suggestions.

At the moment all we have are some vague suggestions as to various requirements.

As a starting point,, I’d have two examples with exactly the same HTML.

Then using CSS get the first layout done the way I want it at mobile size…”mobile first”

Next I’d use different CSS to get the layout in my second example to be then way I want at desktop size.

Moving on, I’d use media queries on my mobile version to get it back to desktop layout as I scale up.

Finally, if I can’t figure out any other way, I’d move on to javascript to perhaps swap a few classes or whatever on resize.

[bdeschryver]

Hey guys,

I finally managed to get it working but this involves javacript to dynamiccaly resize the divs according to the browser window. It seems to work nicely.
I’ll post a demo link as soon as I upload it on my server.

Thanks anyway !

[Author]

Posts