[css] Automatyczna Wysokość

[Nightwalker]

Witam,

Mam sobie takie kod:

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td width="65%" valign="top"><!--SHOUTBOX--></td>
       <td width="35%" valign="top"><div class="borderwrap" style="background-color: #F8F5F1;"><div class="maintitle" style="text-align: center;">News Title</div><div style="height: 137px; overflow:auto; padding: 4px;">NEWS CONTENT</div></div>
	</td>
     </tr>
</table>

 

Jaki styl zastosować aby div "borderwrap" wypełnił wysokością całą komórke?

 

Pozdravki.

[ULLISSES]

Sprawdzałem kod w IE oraz w Operze. Generalnie, to chyba potrzebna jest reszta kodu. Przy tym kodzie co obecnie, to jakoś nie widzę, w czym problem.

[Nightwalker]

Reszta kodu jest nieważna, chcę po prostu dowiedzieć się jakiego stylu (w css) użyć aby div miał 100% wysokości względem komórki tabeli w której jest, przykładowo mamy jednokomórkową tabele, do tej komórki wkładamy kolejną tabele z parametrem height="50%" wypełni ona równą połowe jednokomórkowej tabeli.

[ULLISSES]

Reszta kodu jest nieważna, chcę po prostu dowiedzieć się jakiego stylu (w css) użyć aby div miał 100% wysokości względem komórki tabeli w której jest, przykładowo mamy jednokomórkową tabele, do tej komórki wkładamy kolejną tabele z parametrem height="50%" wypełni ona równą połowe jednokomórkowej tabeli.

Dobra. W końcu załapałem... chyba ;)

Chcesz, aby pierwszy div był niejako tłem dla całej komórki (a więc także diva nr 2). Jeśli chodzi Ci o uzyskanie koloru tła, to można to ustalić dla obiektu td. Można też zrobić nadrzędnego diva dla tych obu:

<div id=tlo>
<div id=tytul>info</div>
<div id=tresc>bla bla bla</div>
</div>

Generalnie można to zrobić nie używając tabeli. Rzuć okiem tutaj:

http://forum.purepc.pl/index.php?showtopic=204960 (kod strony autora tematu).

 

Edit:

Od tego gorąca to już nie myślę. Przestawiłem ten Twój kod i wyszło na to, że właśnie tak jest zrobiony. ;)

Czyli wracamy do punktu wyjścia. Gdy jednak włączymy krawędzie tabeli:

border="1"

to.. nie wiem, jak u Ciebie, ale u mnie ten div zajmuje całą wysokość (jak i szerokość) komórki. Zarówno pod IE 6, jak i Operą 9 beta 2 jest OK.

Edytowane 23 Lipca 2006 przez ULLISSES

[m4r]

(...)

to.. nie wiem, jak u Ciebie, ale u mnie ten div zajmuje całą wysokość (jak i szerokość) komórki. Zarówno pod IE 6, jak i Operą 9 beta 2 jest OK.

Zajmuje, bo ustawił sobie wysokość na sztywno:

<div style="height: 137px; overflow:auto; padding: 4px;">NEWS CONTENT</div>

i dzięki temu mu rozciąga tego diva. Ale jeżeli sąsiednią komórkę tabeli rozciągniesz (tą ze znullowanym shoutboxem), to div zajmie tylko kawałek przydzielonej mu komórki.

 

I chyba sam gdzieś pisałeś rozwiązanie:

<style type="text/css">
.borderwrap{
height: 100%;
min-height: 100%;
}
</style>

[Nightwalker]

Niestety po dodaniu tego kodu do borderwrapper divy z newsem się rozjezdzaja na maxa:

 

[ULLISSES]

Najprościej chyba będzie (przynajmniej dla mnie), jak mi w MS Paint narysujesz, jak ma wyglądać ta strona. Osobiście teraz (poza wymiarami ponad 1024px) nie widzę tam nic złego.

 

Jeżeli chodzi o to, że lewa strona za bardzo się rozciąga, to należy prawej ustalić:

min-width: 35%

[nightstalker]

Jesli dobrze zrozumialem to chcesz uzaleznic wysokosc jednego div'a od drugiego. Div'y leżą obok siebie. Zrobiłeś coś w tym stylu:

 

<div class="lewa" style="width: 200px; float: left; background-color: red;">  <br />  W tej kolumnie jest tekst <br />  od ktorego<br />  ma zalezec<br />  wysokosc kolumny<br />  zoltej.<br />  <br />  </div>    <div class="prawa" style="width: 200px; float: left; background-color: yellow;"> <br /> Niestety<br /> zolta kolumna zyje wlasnym zyciem :)<br /> </div>

A tak naprawde to powinno byc tak:

 

<div class="prawa" style="width: 400px; float: left; background-color: yellow;">    <div class="lewa" style="width: 200px; float: left; background-color: red;">  Teraz ta kolumna<br />  jest wewnatrz tej<br />  zoltej i kiedy<br />  wpiszemy do niej<br />  dlugi tekst...<br />  <br /><br /><br />    </div>   ... zolta kolumna rozciagnie sie na wysokosc czerwonej :)    </div>

Trzeba po prostu umiescic div od ktorego ma zalezec wysokosc tego drugiego wlasnie w tym drugim :) Głupio to brzmi, ale jak sobie obczaicie przykłady to powinniście skapować ;) Tak na szybko to zrobiłem ale zasada chyba jest dobra i przyda sdie przy rozwiązaniu Twojego problemmu...

[rade]

ja mam odwrotną sytuację

jak je wyrównać kiedy to prawy div jest wyższy?

dzięki, pozdrawiam