Höhe 100% zu hoch

MatthiasGi

MatthiasGi

Grüner Idealist
Hallo allerseits!

Ich habe oben einen div-Container, der als Menü-Leiste dienen soll (height: 25px; width: 100%; usw.).

Funktioniert prima, nun möchte ich aber am linken Rand eine zweite Navigation einbauen, die den Rest des Bodys bedecken soll, und nicht mehr!
height: 100% ist logischerweise 25px zu groß. Also was tue ich jetzt, um diese 25px unten wieder weg zu bekommen?

Danke schonmal im Voraus!

Matthias
 
Wie sieht es aus, wenn Du das 2. div auch oben anfangen lässt (top:0px;) das height:100% dazupackst, aber dann noch ein padding-top:25px; hinzufügst..

mfg chmee

maik wird sicherlich gleich eine konforme Idee bringen können :D
 
Hi,

denkbar wäre hier eine absolute Positionierung des zweiten Blocks:
CSS: 
#navi {
position:absolute;
top:25px;
bottom:0;
left:0;
background:yellow; /* dient hier nur zur Visualisierung der Boxengrenzen */
}

@chmee: Wenn beide Angaben (height:100% und padding-top:25px) für eine Box kombiniert werden, käme das Box-Modell zum Tragen, das denselben Effekt im Viewport hervorruft ;)

mfg Maik
 
chmee hat gesagt.:
Wie sieht es aus, wenn Du das 2. div auch oben anfangen lässt (top:0px;) das height:100% dazupackst, aber dann noch ein padding-top:25px; hinzufügst..
Zum Vergrößern anklicken....
Maik hat gesagt.:
@chmee: Wenn beide Angaben (height:100% und padding-top:25px) für eine Box kombiniert werden, käme das Box-Modell zum Tragen, das denselben Effekt im Viewport hervorruft ;)
Zum Vergrößern anklicken....
Dies wäre die zweite Möglichkeit, ohne einen "Boxmodell-Konflikt" zu erzeugen:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-09-13">

<title>tutorials.de | demo_MatthiasGi</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
#topNavi {
position:relative;
z-index:2;
width:100%;
height:25px;
background:red; /* dient hier nur zur Visualisierung der Boxengrenzen */
}
#sideNavi {
position:absolute;
top:0;
left:0;
z-index:1;
height:100%;
background:yellow; /* dient hier nur zur Visualisierung der Boxengrenzen */
}
.pad {
padding-top:25px;
}
-->
</style>

<!-- FÜR IE6 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<!-- / FÜR IE6 -->

</head>
<body>
<div id="topNavi">topNavi</div>
<div id="sideNavi">
     <div class="pad">sideNavi</div>
</div>
</body>
</html>


mfg Maik
 
:D Nach dem Boxmodell hab ich auch kurz gesucht, weil ich nicht mehr wusste, ob padding auch hinzugerechnet würde. Andere Idee wäre auch, Header in den 100%-Content-Bereich einzubauen. Dabei hat man keine klare div-Unterteilung, dennoch ist der Header als Layer vom Content (der ja auch wieder in einem eigenen div liegen könnte) getrennt.

HTML: 
<style type="text/css">
#master { top:0px; height:100%;background-color:#ff0000;}
#header { top:0px; height:25px;width:100%; background-color:#00ff00;}
#content { top:25px; background-color:#22ff22;}
</style>

<body>
<div id="master">
   <div id="header"> ...</div>
   <div id="content">...</div>
</div>
</body>

mfg chmee
 
Schonmal geschaut, was mit dem Stylesheet im Browser herauskommt? Oder arbeitest du im "Quirksmode"? ;)

top ist übrigens ohne eine Angabe zur Positionsart position wirkunglos. Und da sich in deinem Modell die einzelnen Startpositionen automatisch durch den Textfluß ergeben, sind diese Angabe auch überflüssig.

mfg Maik
 
Entschuldigt, hab es nur schnell hingekliert, der Idee wegen. Es ist -ja, maik, stimmt- kein funktionsfähiges Gerüst, sondern stellt nur die Idee dar, mit dem Master-Div den Content künstlich/grafisch zu verlängern. Heisst, Master und Content sind gleich designt.

mfg chmee

p.s.: Werde den Code gleich -nach dem Kanzlerduell- um fehlende Dinge erweitern..
 
CSS: 
* { margin:0;padding:0; }
html,body { height:100%; }
/* Hier folgt dein CSS ohne die top-Deklarationen */
#master { height:100%;background-color:#ff0000;}
#header { height:25px;width:100%; background-color:#00ff00;}
#content { background-color:#22ff22;}
... und deine "height:100%-Kiste" steht im standardkonformen Modus :-)

mfg Maik
 
Hallo nochmal!

Da habe ich ja eine Diskussion angeregt :)

Ich habe mich für die absolute Positionierung entschieden, herzlichen Dank :D

Einen schönen Tag noch,
Matthias
 
Hallo nochmal!

Jetzt habe ich mir das mal genauer angeschaut (Positionierung mit absolute).

Ich habe nun eine Animation mit jQuery eingebaut.
Code: 
$('div#navi').hide('blind', { direction: 'horizontal' }, 1000);

Folgendes Problem: Beim zusammenklappen wird der Navi-Container von der Höhe her sehr klein :(

Was tun?

Danke schonmal im Voraus!
Matthias
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück