Dynamische Höhe von 100%
0 0 
Felix Riesterer
0
Dynamische Höhe von 100%
Hallo,
ich möchte eine Seite entwerfen mit einer Kopfzeile und einer Fuß-
zeile. Dazwischen sollen drei Elemente über "float" nebeneinander
gereiht werden. Jetzt sollen die Kopf- und Fußzeile jeweils ein Höhe
von 70px besitzen und der Zwischenraum soll sich automatisch so ändern,
dass immer 100% des Fensters befüllt sind. Kann mir jemand helfen???
Danke im voraus...
-
Einen Ansatz hab ich schon selbst gefunden!
Nur wie schaffe ich es jetzt hier das die drei Elemente der Mitte
sich automatisch der Höhe im Zwischenraum anpassen!?<html>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
div.main { width: 100%; background-color: #eee; height: 100%; }
#head { height:70px; min-height: 70px; width: 100%; background-color: red; }
#navi { float: left; max-height:98%; width: 180px; background-color: yellow; }
#info { float: left; width: 300px; background-color: #aaa; }
#last { float: left; background-color: blue; margin:auto; }#end { clear: both; width: 100%; background-color: green; height: 70px; position: absolute; top:100%; margin-top:-70px; }
</style>
<bod>
<div class="main">
<div id="head">head</div>
<div id="navi">navi</div>
<div id="info">info</div>
<div id="last">last</div><div id="end">end</div>
</div>
</body>
</html>
-
Lieber max,
Jetzt sollen die Kopf- und Fußzeile jeweils ein Höhe
von 70px besitzen und der Zwischenraum soll sich automatisch so ändern,
dass immer 100% des Fensters befüllt sind. Kann mir jemand helfen???ähm, noch eine Gegenfrage: Was passiert, wenn der Zwischenraum so voll wird, dass er nach unten verlängern müsste? Sollen dann Scrollbalken erscheinen, oder soll die Seite dann eben länger als 100% werden?
Vielleicht hilft Dir das Eigenstudium dieser Seite weiter...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Tachchen!
Mit dem Suchbegriff "footer" dürfte dich das Archiv fast erschlagen mit Lösungen.
Du musst dann nur noch Scrolllösungen von den anderen trennen. ;-)Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
Smartbytes Webdesign in Oberhausen