[XHTML]Automatyczne rozciąganie diva. Opcje

[DonJeday]

Witam,

Mam główny div w którym jest kolejny div. I teraz chccę żeby wysokośc głównego diva wzrastała wraz z wysokością diva który jest w nim, jak to zrobić? Jak usune z niego height to robi się bardzo krótki i div w nim wystaje za niego.

[Maxik]

height: 100% na diva nadrzędnego, możesz tez nadać min-height: 500px;

[DonJeday]

Dalej wewnętrzny div wychodzi za główny i przy 100% dalej jest króciutki.

[CSS] pobierz, plaintext 
div#glowny {
	background-color: #FFFFFF;
	border: 1px solid #BABCC2;
	width: 680px;
	height: 100%;
	margin: auto;
	padding: 20px;
}
[CSS] pobierz, plaintext 

Ten post edytował DonJeday 24.10.2008, 22:44:35

[Chrom]

może skorzystaj z overflow, hidden ukryje nadmiar a visible pokaże całość

[hiszpanespaniol]

dla internet explorer'a (przepraszam za wyrażenie) "height" oznacza tak naprawdę minimalną wysokość. Natomiast dla przeglądarek internetowych oznacza po prostu wysokość (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . Więc jeżeli chcesz, aby Ci się skalowała wysokość pod wszystkimi przeglądarkami, to musisz zrobić taki myk:

[HTML] pobierz, plaintext 
div#glowny {
height: auto !important;
height: 20px;
min-height: 20px;
}
[HTML] pobierz, plaintext 

Pierwsza linijka każe np Firefox'owi ustawić automatyczną wysokość i jednocześnie zignorować drugą linijkę.
Druga linijka ustawia wysokość (czyli minimalną wysokość dla ie) na 20px.
Trzecia (niezrozumiała dla ie6) ustawia minimalną wysokość dla tych przeglądarek, które znają coś takiego jak min-height.
Czyli Fx, Opera i ie7 odczytaja 1szą i 3cią linijkę, ie6 odczyta tylko drugą. W ten sposób otrzymasz minimalna wysokość pod wszystkimi przeglądarkami. Nie potrzeba tu overflow'ów jeśli div'y wewnątrz głównego nie będą float'owane.

Jeżeli chcesz inną minimalną wysokość, to pamiętaj o jej zmianie w obydwóch linijkach.
I taka kolejność definiowana jak napisałem jest niezbędna żeby działało.

pozdrawiam

[Cysiaczek]

Dalej nie rozwiązaliście problemu skalowania (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
function allocateSidebarHeight()
{
	var contentDom = document.getElementById("rightcolumn");
	var sidebarDom = document.getElementById("leftcolumn");
 
	if(contentDom.offsetHeight > sidebarDom.offsetHeight)
	{
		sidebarDom.style.height = (contentDom.offsetHeight)+"px";
	}
	else if(sidebarDom.offsetHeight > contentDom.offsetHeight)
	{
		contentDom.style.height = (sidebarDom.offsetHeight)+"px";
	}
}
 
window.onload=allocateSidebarHeight;
[HTML] pobierz, plaintext 

Do dla divów umieszczonych obok siebie , ale doskonale zadziała przy skalowaniu diva wewnątrz diva. Znacie inny sposób?

Pozdrawiam.

[hiszpanespaniol]

nikt mi nie wmówi, że js jest potrzebny do tak banalnego problemu jakim jest skalowanie diva w pionie.

[Cysiaczek]

Ok, to ustaw mi dwa divy obok siebie w taki sposób, aby oba miały tą samą wysokość niezależnie od ilości treści w dowolnym z nich. Naprawdę nie kpię, tylko zupełnie poważnie mówię - ja nie umiem.

Pozdrawiam.

p.s Oczywiście wysokość ma być auto (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[hiszpanespaniol]

to, o czym ty piszesz, mija się z tematem tego postu. problemem jest jak rozciągnąć div'a w ten sposób aby div w środku (nie obok) się zawsze mieścił.

co do dwóch div'ów obok siebie to też nie masz racji. sposób jest taki jak napisałem w poprzednim poście, ale wewnętrzne div'y mają wysokość auto (może z jakimiś hack'ami dla ie typu height: auto; height: 100%). div'a kontener można zastąpić body. generalnie nie jest aż tak źle, żeby css sobie nie poradził z tym. jak w wolnej chwili to napiszę, to edytuję post

[-mkdes-]

A sprawa jest banalnie prosta.
Najlepiej ustaw styl dla wszystkich divów od razu.
Wtedy zawartość rozciąga diva.
div { overflow: hidden; }

[Maxik]

Cysiaczek: osobiście coś takiego zrobiłem, myk to faux column i w praktyce wygląda tak: http://maxik.netmark.pl/pyton/div/ kliknij na "Kontakt" i obserwuj (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[hiszpanespaniol]

Cysiaczek miał na myśli dwa div'y obok siebie, a nie żadne triki z tłem czy coś w tym stylu. Faux columns to po prostu iluzja takich div'ów o równej wysokości. Poza tym dodałem 30 linijek treści w Twoim kodzie (kiedy juz doszedłem który div ma ją zawierać) i nie zauważyłem żeby kolumna menu się rozciągnęła. Czyli taki layout jaki pokazałeś w linku można zrobic z ....... 6 elementów bez zagnieżdzania (bez divów w divach, właściwie tylko z 1 divem w ogóle) i efekt ten sam.

Przecież równie dobrze można dać jako stronę www zwykły jpg z mapami linków i powiedzieć, że się strona nie rozlatuje. Jeśli już robić triki z tłem, to lepiej lewy div floatować, a prawemu dać margines o szerokości lewego diva. i kropka. dwa div'y.

Generalnie problem z tematu jest rozwiązany, problem z dwoma div'ami obok siebie i o równej wysokości chyba rzeczywiście wymaga js.

[DonJeday]

Problem rozwiązany wystarczyło na początku css dać:
div {
overflow: hidden;
}


A w głównym divie:
height: auto;

Ten post edytował DonJeday 25.10.2008, 16:47:30