+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Layout div 100% height + floaty (/thread-layout-div-100-height-floaty)
Layout div 100% height + floaty - bor1904 - 19-03-2013
RE: Layout div 100% height + floaty - Engine - 19-03-2013
poczytaj o overflow:hidden; i clear:both; oraz po testuj u siebie a problem zniknie.
RE: Layout div 100% height + floaty - bor1904 - 19-03-2013
(19-03-2013, 05:07)Engine napisał(a): poczytaj o overflow:hidden; i clear:both; oraz po testuj u siebie a problem zniknie.
Nadal nie bardzo sytuacja się zmieniła.
Po dodaniu porządkującego diva z clear both przed stopką zmienia tyle że stoka jest przyklejona do najbardziej odległego w dół słupka który wyskoczył poza diva rodzica.
overflow: hidden zastosowany do wystających słupków niczego nie zmienia. Jeśli jednak zadziałałby to nie bardzo interesuje mnie ukrywanie treści...
proszę o dalsze wskazówki, dziekuje
RE: Layout div 100% height + floaty - Engine - 19-03-2013
to naprawdę jest takie trudne powklejać sobie "overflow" w rożnych miejscach i poobserwować jak zachowuje się layout
Kod:
<html style="height: 100%">
<head>
</head>
<body style="height: 100%;">
<div style="width: 1000px; margin: 0px auto; background: orange; height: 100px;">NAGŁÓWEK</div>
<div style="width: 1000px; margin: 0px auto; background: yellow; min-height: 100%; overflow:hidden;">
<div style="width: 200px; float: left; background: blue; height: 100%; padding-left: 5px; position: relative">
<div style="width: 160px; background: black; color: white" >
<br><br><br>
MENU ROZSUWANE
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="width: 160px; background: red; height: 100%">
REKLAMA (100% height )
</div>
</div>
<div style="float: right; overflow:hidden;">
<div style="width: 700px;background: red; height: 200px">
BANER
</div>
<div style="width: 700px; overflow:hidden;">
<div style="width: 500px;float: left;background: blue;">
TREŚĆ WSZYSTKO ROZCIĄGA W DÓŁ
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="float: right;height: 100%;background: black;width: 200px;">
PASEK Z INFO (100% height )
</div>
</div>
</div>
</div>
<div style="width: 1000px; margin: 0px auto; background: orange; height: 100px; clear:both;"></div>
</body>
</html>RE: Layout div 100% height + floaty - bor1904 - 19-03-2013
Dziekuje bardzo za zainteresowanie ale to dalej nawet w 10% nie rozwiązuje problemu. Dalej paski się nie dociągają i znika zawartość divów (hidden).
Może inaczej zapytam.
Czy da się zrobić ...a zapewne da i w jaki sposób layout jak w załączniku?
Strzałkami zaznaczyłem pola które bedą się różniły długością... po lewej rozwijane menu a po prawej content strony.
Finalnie chce żeby bez ukrywania (overflow:hidden) zawsze wszystkie prostokąty konczyły się lub zaczynały na liniach przerywanych.
Walcze już 3 dzień i nawet z jquery i opcjami offset i height nie moge sobie poradzić na różną interpretację przeglądarek i błędne szacowanie faktycznej wysokości.
Bardzo proszę o wskazówki
RE: Layout div 100% height + floaty - Engine - 19-03-2013
to nie prościej dać div-owi obejmującemu (dwa divy-y) tło o szerokości i koralach tych div-ów: background:url(bg.jpg) repeat-y;
np.
<div style="background:url(bg.jpg) repeat-y; overflow:hidden;">
<div style="width: 200px; float: left;">zawartość</div>
<div style="width: 200px; float: left;">zawartość</div>
</div>
RE: Layout div 100% height + floaty - Kartofelek - 19-03-2013
Niestety ten layout jest błędnym podejściem do tworzenia stron
. Tak jak powyżej robiło się kiedyś na tabelkach. Teraz stron nie robi się na daną wysokość, która w webie nie istnieje!Inaczej mówiąc. Jak tworzysz layout powiedzmy kolumnowy, to masz różne kolumny które ROZCIĄGAJĄ layot w dół. Ale każda kolumna jest niezależna.
No niestety trzeba się nauczyć tego innego podejscia do robienia layoutów
U ciebie belka boczna powinna mieć swoje tło. Elementy belki powinny rociażgać tą belkę w doł. Tak samo powinno być z contentem (patrz popularne laje do wordpressa). ALE TE ELEMENTY nie powinny budować tła layoutu.Jakby ci to lepiej powiedzieć. Gdyby belka boczna cała miała żółte tło, ale jej elementy były by bez tła (żadne czarne i czerwone), a tylko rociągały belkę to nie musiał byś stosować ani height:100%, ani podobnych głupot. A layout by się ładnie rozciagał.
Ps. Height 100% działa wtedy, gdy element nadrzędny ma ustawioną stałą wysokość, więc jest to praktycznie nie użyteczne.
Ps2. A może ta technika ci pomoże? http://tympanus.net/codrops/ (zbada firebugiem jak jest zbudowana tutaj boczna belka)