od jakiegoś czasu mam bzika z konkretną sprawą układu, że oczywiście podchodzę w niewłaściwy sposób.Przepełnienie z układem absolutnego/względnego pozycjonowania
Oto podejście w podziale na jego podstawowe składniki:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stretched">
<div class="header">SOME HEADER</div>
<div class="someControls">
<input type="button" value="click me"/>
<input type="button" value="no me"/>
</div>
<div class="inner">
some text...
</div>
</div>
</body>
</html>
z następującym css:
.stretched {
position:absolute;
height:auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 250px;
margin: 30px auto 20px;
background-color: green;
}
.inner {
margin:10px;
background-color: red;
overflow: auto;
}
Co usiłuję zrobić jest posiadanie stretched div wykorzystując wszystkie dostępne pionowa przestrzeń rzutni (minus kilka pikseli powyżej i poniżej dla nagłówka i stopki) i są wyśrodkowane w poziomie za pomocą ustalonego z.
Wydaje się, że działa całkiem dobrze. Problem polega na tym, że właściwość overflow: auto; nie jest stosowana do zawartości inner, tak jak tego chcę. Gdy some text... wydłuża się, podziałka inner nakłada się na mój kontener i nie wyświetla pasków przewijania.
Oto Fiddle: fiddle #1
Chcę uniknąć konieczności przewijania strony na ciele i zamiast o przepełnienie zarządzany przez przewijania wewnątrz inner div, dzięki czemu stretched zawsze całkowicie widoczne.
mogę zastosować tę samą sztuczkę z position: absolute; top: 0; ... do inner div jak dobrze, ale potem muszę określić wysokość header + someControls wyraźnie, co chcę uniknąć, bo jest inny od wszystkich moich stron.
Jak to działa jak chcę go (z wyjątkiem części top: 40px;): fiddle #2
Co robię źle tutaj? Z góry dziękuję!
+1 za dobrze zorganizowany pytania i stara się. – MarioDS
Czy wymagana jest obsługa IE7? – thirtydot
Niekoniecznie. Byłoby miło. – FlxMgdnz