CSS pozycjonowanie absolutne

Dla specjalistów Webmastering
#1

Witam,

mam drobny problem z pozycjonowanie na stronie.

Na stronie mam 4 divy: #header, #content, #bottom oraz #footer.

Poniżej zamieszczam CSS dla tych div’ów:

div#header

{

    height: 100px;

    background: url('images/bg_top.png') repeat-x bottom #1cade4;

}


div#footer

{

    height: 90px;

    background: url('images/bg_bottom.png') repeat-x top #1d6da2;

    position: absolute;

    bottom: 0;

    width: 100%;

}


div#content

{

    margin: 0px 35px 30px 35px;

    padding: 0px;


}


div#bottom

{

    position: absolute;

    bottom: 90px;

    height: 130px;

    width: 100%;

    background: #FFFFFF;


}

Problem jest tego typu, że w #content mam umieszczoną treść, która wchodzi mi pod dwa ostatnie, czyli #bottom oraz #footer. Chciałbym otrzymać taki efekt, że wraz z rozmiarem okna przeglądarki dwa ostatnie divy zostaję u dołu strony (jak teraz), a #content zmienia swój rozmiar. Po przepełnieniu treścią powinien pojawiać się scroll. Mam nadzieję, że w miarę jasno opisałem do jakiego efektu dążę.

#2

A jak to się przedstawia w html’u (można by sobie “wizualizację” zrobić ;))?

#3
#4

Chodzi Ci o efekt przyklejonej stopki?

http://blog.ibeq.pl/2010/11/08/przyklej … ka-strony/

http://blog.ibeq.pl/przyklady/przyklejona-stopka/

#5

No właśnie nie do końca, bo w przykładzie, który podałeś, po dodaniu większej ilości treści strona ulega rozciągnięciu, a mi chodzi o to, aby pojawiał się scroll z możliwością przewijania samego tekstu, a pozycja stopki pozostała stała.

#6

Musisz brać pod uwagę że wysokość okna przeglądarki się zmienia w zależności od przeglądarki rozdzielczości ekranu itp.

Za pomocą javascripta możesz pobrać wysokość wewnętrznego okna przeglądarki, odjąć sobie wysokość topa i stopki i taką wysokość przypisać środkowemu divovi z tręścią - proste tylko się zastanawiam czy taki efekt można uzyskać tylko za pomocą css’a…

#7
#8

Właśnie zależy mi na tym, aby nie angażować w to JS’a.

#9

manieKMP Mi Twój kod pod FF ani Chromem nie działa…

#10

@ziggurad, dziwne, testowane na Fx’ie i GC… zatytułowałeś css’a “test.css”?

#11

Wrzuciłem bezpośrednio do htmla i na pewno łapie css’a, sam kod i css’a kopiowałem z Twojego posta dwa razy dla pewności. Nie wiem czy coś innego mogłem skopać :smiley:

#12

Niestety, ale nadal nie jest to ten efekt, który chcę osiągnąć, w dalszym ciągu wraz ze wzrostem zawartości rozciąga się strona.

#13

Może właśnie w tym tkwi błąd, bo jeśli dobrze kojarzę, to sam miałem ostatnio dziwne myki z wbudowanym w html css’em (przynajmniej Fx nie chciał części regułek przyjmować).

Czyli “głowa” i “stopa” mają być widoczne po zwiększeniu się treści?

#14

manieKMP , dokładnie o to chodzi.

#15
#16

manieKMP , będę bardzo wdzięczny.