6 replies [Last post]
ghostrider
Offline
newbie
Last seen: 16 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-10-22
Posts: 3
Points: 0

Hello all,

Here is the problem:
I need 3 rows layout that follows this rules:

    1.header of flexible height (always visible)
    2.scrollable content between header and footer
    3.flexible height footer always at the bottom of viewport

it seems easy, but it's real nightmare for me.
This is for a web-based PHP application where header serves as mmenu/navigation and footer as status bar displaing help, tasks progress ect.

Thanx in advance

[/]
pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 30 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

3 rows layout

hello,

well, first you need to use the whole available height of the screen: a useful resource for that : 100% height

Then, you set up 3 divs:

<style>
html,body{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#page{
height:99%;
}
#header{
height:10%;
background-color:#FF0000;
}
#main{
overflow:auto;
height:80%;
}
#footer{
background-color:#FF0000;
height:10%;
}
</style>

i made a quick one, check it out.

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

ghostrider
Offline
newbie
Last seen: 16 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-10-22
Posts: 3
Points: 0

3 rows layout

thanx pixeline, but this is not what i need, here is why:
I display ceratin information as page header and cannot say if its' gonna be 50px or 150px tall, it depends on user choices . Same applies to footer. in file you created if I add some header content it streches down and moves actual contend down as well, then overflow:hidden rule applied to html, body makes it impossible to scroll down to footer.

To put it simply i'm trying to mimic the look of a browser window. It has tool bar on the top, status bar at the bottom and display in a pane between this two. Hope that explains what i'm looking for

After hours of searching i-net i still haven't got a solution. I'm wondering if it's possible at all with CSS/table-less

anyone... please ...

pixeline
Offline
Regular
Brussels, Belgium
Last seen: 17 years 30 weeks ago
Brussels, Belgium
Timezone: GMT+1
Joined: 2004-07-02
Posts: 30
Points: 0

3 rows layout

well, it's pretty hard to tell if it's possible or not, if you don't detail what you need right before asking Wink

for the problem with the header/footer, there is a css property "white-space:no-wrap" wich prevents that a line be displayed in 2 rows and forces the content to stay in one horizontal line.
You could apply that to all content within header/footer.

otherwise, look for tables with scrollable row in google...
you would then set a table with top row (header), midrow(tbody), last row being the "footer".

........................................ . . . . .
p . x e l | n e
Brussels web designer pixeline

nmiddleweek
Offline
Regular
London
Last seen: 13 years 1 week ago
London
Joined: 2008-11-12
Posts: 14
Points: 0

hello ghostrider... did you

hello ghostrider... did you get this sorted? I'm after the exact same thing as you... Smile

Cheers!

pixeline: I was in Brussels yesterday, had a nice cuppa tea at Sam's Cafe next to that big horse just before getting on the eurostar home :thumbsup:

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 7 years 2 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Is this what you're looking

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

This post may be helpful..

This post may be helpful.. maybe

http://csscreator.com/node/33039