nicht angemeldet
height = 100% und margin
Hallo Forum,
ich versuche einen DIV-Container über die gesamte Fensterhöhe
auszudehnen:
<style>
html { overflow-y: scroll; height: 100%; }
body{
margin:0;
padding:0;
background: #F3F3F3;
height: 100%;
}
#maincontainer_div{
width: 924px; /*Width of main container*/
height: 100%;
margin: 0 auto; /*Center container on page*/
background: #FFFFFF;
}
</style>
<body>
<div id="maincontainer_div">
</div>
</body>
... das funktioniert auch soweit:
"maincontainer_div" ist 924px breit, horizontral zentriert und nimmt
die gesamte Höhe des Fensters ein.
Jetzt das Problem:
------------------
Ich will eigentlich nicht dass "maincontainer_div" die gesamte Höhe
einnimmt, sondern oben und unten 20px Abstand zum Festerrand bleiben.
Wenn ich für eines der Elemente html, body oder maincontainer_div
margin oder padding anwende, kommt das zu den 100% dazu. Sprich:
Es der Inhalt wird grösser als das Fenster (100%+20px).
Kann mir jemand dazu einen Tipp geben ?
tausend Dank und
beste gruesse,
martin
-
Hi Martin,
für oben einfach ein div _in_ den Container, das aussieht wie der Hintergrund. Oder du lässt den Container aussehen, wie den Hintergrund und gibst den obersten Inhalten Rand nach oben.
Der Rest hier:
http://forum.de.selfhtml.org/archiv/2007/10/t159861/#m1039925(Die meisten Fragen gabs irgendwann schon mal. Die Forum-Suche lohnt sich ;-)
Gruß
Antipitch-
Hi Antipitch,
es ist also doch nur mit Gebastel möglich. Egal die Lösung gefällt mir gut. Das Problem ist, dass ich um den maincontainer_div ne border ziehen muss. Die muss ich dann auch basteln. Das dürfte aber kein Problem und soll ertmal nicht das Thema sein.
Ich bin aber an einem ganz anderen Umstand gescheitert:
html, body {height:100%}
#maincontainer_div {min-height:100%}<body>
<div id="maincontainer_div">
<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>
</body>... geht wunderbar -> der maincontainer dehnt sich entsprechend
dem Content aus. Wenn das aber so aussieht:<body>
<div id="maincontainer_div">
<div>
<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>
</body>... geht's nicht mehr, obwohl für div gar keine styles definiert
sind.was ist da das Problem ?
tausend Dank für eure Hilfe und
beste gruesse,
martin-
Hi Martin,
html, body {height:100%}
#maincontainer_div {min-height:100%}... geht wunderbar -> der maincontainer dehnt sich entsprechend
dem Content aus. Wenn das aber so aussieht:... geht's nicht mehr, obwohl für div gar keine styles definiert
sind.wer/ was dehnt sich nicht aus :-)? Gib doch beiden div mal unterschiedliche Hintergrundfarben. Es sei denn, du hättest im IE6 geguckt. Für den fehlt bei dir ja auch das notwendige
* #maincontainer_div {
height:100%;
}(das ist ein hack. Der IE6 versteht min-height nicht, geht aber mit height um wie richtige Browser mit min-height. Sein schwachsinniger jüngerer Bruder [Spitzname: 7] versteht min-height, denkt aber immer noch, height sei dasselbe).
Gruß
Antipich
-
-
Hi Antipitch,
ok, nochwas dazugelernt:
damit äussere Box mitwächst, wenn der inhalt wächst,
muss das lezte Elment darin gecleart werden, sofern
das innere gefloatet wurde. Mir fehlt die Kraft das
schlauer auszudrücken ;)nun bin ich bei deinem Footer. Das funktioniert auch
allerdings darf der bei mir merkwürdiger Weise nicht
zu schmal sein. 25px geht noch, allerdings entsteht
bei 11px wieder ein Scrollbar.????
das kommt mir verdammt mistriös vor.
gute nacht,
martin
-
-
Hallo Martin,
margin: 20px auto; für deinen #maincontainer_div sollte eigentlich genügen. height: 100%; ist nicht nötig
Oder möchtest du, dass dein div immer Fenstergrösse hat + oben und unten 20px, auch falls der Inhalt zu groß wird? Das geht mit css nicht, da müsstest du javaScript nehmen.