nicht angemeldet
DIV dynamisch ausdehnen
Hallo,
ich habe ein Layout das ihr dem angehängten Code entnehmen könnt (verzeiht die Länge, ich habe noch keine Möglichkeit das online zu stellen).
Das Problem ist, dass sich der inhaltsbereich je nach Inhaltsumfang nach unten ausdehnen soll, jedoch soll eine gewisse Mindestgröße erhalten bleiben wenn wenig Inhalt angezeigt wird. Der IE macht das mit diesem Code, der Firefox nicht.
Ich habe schon an den Höhenangaben (auto/feste Angaben) in #inhalt und #contents gespielt und es mit min-height versucht. Alles ohne Erfolg. Bin für jeden Tipp dankbar!!
Gruß,
Thomas
body
{
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 1em auto;
width: 850px;
text-align: left;
background-color: red;
border: 1px solid back;
positon: absolute;
}
#header
{
float:left;
height: 85px;
width:850px;
background-color: #900000;
}
#contents
{
margin-right: 0px;
margin-left: 0px;
height: auto;
width: 850px;
/*background-image: url(gelb.gif);*/
background-color:orange;
top:85px;
}
#mainnav
{
height: 20px;
width:200px;
float:right;
padding-right:10px;
color:orange;
background:url("lu.gif") bottom right no-repeat;
}
#menu
{
float: left;
width: 110px;
height: 340px;
background-color: #900000;
}
#inhalt
{
float:top;
margin-top:30px;
margin-left:120px;
width:720px;
text-align:center;
clear:right;
border:2px solid black;
height:470px;
}
#footer
{
clear: both;
height: 20px;
width:850px;
background-color: #900000;
color:orange;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="contents">
<div id="mainnav">
</div>
<div id="menu" >
</div>
<div id="inhalt">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<br>text<br>text<br>text<br>text<br>text<br>text<br>text
<br>text<br>
</div>
</div>
<div id="footer"><div>
</div>
</body>
</html>
-
Hallo Thomas.
height: auto;
Versuche doch stattdessen lieber mal:
#contents { min-heigth: 90%; } * html #contents { heigth: 90%; } /* Meinetwegen auch ein anderer Wert */Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|
Try it: Become an Opera Lover in 30 days -
Hi
min-height ist so eine Sache, weil der scheiß IE des net kennt
aber ich würds mal mit html versuchen.
Bei mir wars so dass ich wollte dass ich einen Content habe und der sollte zuerst mal den gesamten Bildschirm (Auflösung) in Ansrpuch nehmen (egal wie lang der Text ist), und dannach, falls der TExt über die 100% Höhe hinaus geht sollte das Layout mit aufgezogen werden.
Ich habe das Problem mit html{height:100%} gelöst, da bei mir vorher der Firefox das Layout nur so weit aufgezogen hat, wie der Text lang war.
Gruesse
Mathias