Problem: HTML/CSS div height100%

[torm]

Witam,

 

koduję sobie właśnie stronkę... i trafiłem na problem, nie bardzo wiem jak rozciągnąć div'a na całą wysokość strony (żeby do tego zmieniał się wraz z zawartością) szperam w google już od wczoraj, ale nie znlazłem nic ciekawego, o ile to możliwe chciałbym uniknąć javascripta. Może ktoś z was spotkał się już z takim problemem?

[SSn4k3]

Spróbuj dla body też ustawić height:100%; W sumie to po co Ci div rozciągnięty na 100% wysokości? Może da się zrobić "to coś co chcesz zrobić" inaczej?

[torm]

pokażę projekt strony:

http://www.fotosik.pl/pokaz_obrazek/74a17f2a9ebc2263.html

 

i teraz chodzi o ten pasek po lewej, na razie jest tak:

div.left
{
height:100%;
background-color:#161616;
position:absolute;
margin-top:146px;
width:50%;
z-index:-1;
}

 

z tym, że 100% oznacza wysokość monitora... więc nie rozciąga się wraz z zawartością, auto nic nie daje... nawet jak jest umieszczony w kontenerze z całą zawartością strony... poza tym tak samo stopkę... potrzebuje rozciągnąć do samego dołu

[SSn4k3]

Pogubiłem się:) TEN pasek? (załącznik)

[torm]

dokładnie tak

[SSn4k3]

#content {

width:500px;

height:100%;

}

 

#left {

height:100%;

width:200px;

background-color:red;

}

 

 

Na szybko napisałem, bo w pracy jestem:) div parent (content) musi mieć ustaloną wysokość (chociażby w %).

[torm]

mam dokładnie tak:

 

CSS:

div.wrapper
{
height:100%;
}

div.left
{
height:100%;
background-color:#161616;
position:absolute;
margin-top:146px;
width:50%;
z-index:-1;
}

div.main 
{
margin-left:auto;
margin-right:auto;
width:999px;
}

 

HTML:

	ZAWARTOŚĆ

 

Problem polega na tym, że div.left rzeczywiście rozciąga się na 100%, ale na 100% monitora, a nie treści. I jak zmienię treść to zostaje cały czas tak samo. Poza tym div.left nie może być ograniczony przez width.

 

Pozdrawiam, również z pracy :)

[SSn4k3]

Zaraz, zaraz:) Ja myślałem, że chodzi o 100% monitora:P Czyli chcesz, żeby wysokość tego lefta dostosowywała się do wysokości środkowego contenta z tekstem?

[torm]

Chciałbym, żeby to wyglądało tak jak na projekcie, ale jeśli treści będzie więcej (bo to joomla) to div powinien się rozciągnąć.

[SSn4k3]

#wrapper {
width:800px;
background-color:pink;
padding:10px;
float:left;
height:auto;
}

#left {
height:100%;
width:200px;
background-color:red;
float:left;
}

#cos {
float:left;
width:250px;
}

#content {
background-color:orange;
width:500px;
height:auto;
float:left;
height:600px;
}









Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat, purus sed lobortis pulvinar, eros eros accumsan enim, ut porta lectus dui eu massa. Nullam pellentesque posuere libero, eu rhoncus nulla adipiscing ut. Praesent lectus massa, vestibulum ullamcorper aliquam eget, congue a metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat dictum nibh, nec suscipit ante commodo eget. Nunc ut risus a nisi vulputate aliquet. Donec elementum adipiscing sapien ac pulvinar. Donec arcu augue, imperdiet vel vestibulum eu, rutrum et massa. Nulla condimentum nisi ut ligula iaculis rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec auctor velit. Cras malesuada, dui non rhoncus rutrum, enim libero molestie elit, ut aliquam metus sapien vitae lectus. 

[torm]

Ja jeszcze poryję w google, może akurat się coś trafi...

[torm]

Podobno da się to zrobić na tabelkach... ;)

[SSn4k3]

hmmm, tak mi wpadł pomysł teraz.

[torm]

tylko problem w tym, że ten left... musi się rozciągać do lewej krawędzi strony.. i tutaj jest zagadka też :)

[SSn4k3]

Jak nie urok to sraczka:D Nie poddawaj się torm - ja tu też móżdżę na dwa fronty:)

[torm]

hehe, a gdzie pracujesz, jeśli to nie tajemnica?

[SSn4k3]

Jeśli się dowiesz to będę musiał Cię zlikwidować:)

[torm]

teraz mi to mówisz? ;)

[Knysha]

A po co tam div'a w ogóle dawać? Nie lepiej wrzucić obrazek tła z repeat-x, a div po prawej stronie (z treścią) float: right ?

[torm]

no tak, ale obrazek musi mieć jakąś wysokość...

[kots]

Postanowiłem zrobić taki "super-speed-coding". ;) Efekt w załączniku. Najbardziej proste, szybkie (i nieco toporne) rozwiązanie jakie przyszło mi do głowy.

 

O coś takiego chodziło?

 

W razie czego mam jeszcze kilka pomysłów. :)

[torm]

działą extra... ale pod topem po lewej jest jeszcze czerwony pasek... i niby wiem jak go wstawić, ale teraz jak dam mu z-index:-1, to chowa się pod background-image... :/

 

łap repa... a ja jeszcze pokombinuje z tym paskiem

 

-edit-

udało mi się wykombinować, po prostu dałem paskowki z-index:0, a temu co nadnim z-index:1, jednak, ważna rzecz, żeby pamiętać, przy z-index... niezbędny jest position:absolute;

Edytowane 21 Maj 2010 przez torm

[kots]

Hm, hm. Nie wiem za bardzo o co chodzi? Jeśli roztłumaczysz lepiej, z chęcią pomogę.

 

Btw. z-index'y działają też z position relative!