Div bis zum Ende vom Browserfenster

K

Kracky

Mitglied
Hallo Leute,

ich habe ein Layout gemacht was sich eigentlich in 3 Elemente unterteilt,

Header, Navigation und Content.

Header und Navigation haben feste größen aber der Content ist Dynamisch und soll mit der länge der Seite mitgehen.

Jetzt habe ich 2 Fragen:

1.) Wenn die Seite relativ kurz ist, wie kann ich es dann realisieren, dass das Div immer bis zum unteren Rand des Browsers geht?
Und zwar so das es nicht darüber geht sodas ein Scrollbalken erscheint. Wenn ich vorher html, body ein height: 100% zuweise dann kann ich zwar das Div auf 100% stellen aber es wird dann immer 100% der Seite lang und da davor noch Navigation und Header kommen entsteht so immer ein Scrollbalken der die Seite nochmal um 50% verlängert. Ich will es auch nicht fix positionieren da man bei der größe des Fensters oder der Bildschirmauflösung immer ein anderes Ergebnis bekommt. Gibt es da vlt. noch Methoden?

2.) Wenn ich den Text in einem Div höher stelle z.B. mit position: relative top: -100px dann ist das "Hintergrunddiv" (Div in einem Div) ja noch an der selben stelle. Aufgrund des Layouts ist es mir auch nicht möglich das Bild zu verschieben daher frage ich mich ob es eine Möglichkeit gibt 100px von dem Hintergrundbild wegzunehmen von unten nach oben. Es soll am Ende immernoch Dynamisch mit dem Text mitlaufen aber halt immer 100px kürzer sein.
 
Kracky hat gesagt.:
Wenn ich vorher html, body ein height: 100% zuweise dann kann ich zwar das Div auf 100% stellen aber es wird dann immer 100% der Seite lang und da davor noch Navigation und Header kommen entsteht so immer ein Scrollbalken der die Seite nochmal um 50% verlängert.
Zum Vergrößern anklicken....

hab ich doch schon längst probiert?!
 
erm?! wie ich schon 2 mal geschrieben habe, habe ich genau das schon versucht das klappt aber nur solange wie man nicht ein oder mehrere divs über dem content div hat.
 
Kannste als Vorlage(Beispiel) nehmen.
Code: 
<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">

* {
 margin: 0;
 padding: 0;
}

html , body {
 height:100%;
}
#wrapper {
 margin:0px auto -40px auto;
 background: #dadada;  
 width:960px;
 min-height:100%;
 overflow:hidden;
}


#head {
 padding:20px;
 height:60px;
 background:#ada;
}

#topnavi {
 background:#dee;
 padding:15px;
}

#left { 
 width: 65%;  
 background: #aee;  
 float: left;
 padding-bottom:40px;
}

#right { 
 margin-left:65%;
 background: #dad;
 padding-bottom:40px;
}

#footer {
 margin:0 auto;
 background:#ade;
 width:960px;
 height:40px;
}
h2,p {
 padding:20px 20px 0 20px;
}


</style>
<title>Float/Margin-Layout</title>
</head>
<body>
<div id="wrapper">

<div id="head"><h1>Meine schöne Homepage</h1></div>
<div id="topnavi">navigation</div>
<div id="left">
<h2>Links</h2>
<p>Hier ist der Hauptteil</p>

</div>
<div id="right">
<h2>Rechts</h2>
<p>Das ist deine Sidebar</p>
</div>


</div>  
<div id="footer">Footer</div>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück