2010-11-23 9 views
0

Ich arbeite an einer HTML-Seite, wo ich zwei Divisionen links und Mitte innerhalb einer Wrap-Abteilung habe. Die mittlere Abteilung enthält den Inhalt und die linke ein Navigationsmenü. Das Problem ist meine mittlere Abteilung wird erweitert, da es den Text enthält, ich wollte die Navigationshöhe gleich der der Mitte machen.expandierende Divisionen in HTML

die HTML-Seite ist wie folgt,

<div id ="wrap"> 
<div id="left"> 
##navigations menu 
</div> 
<div id="middle"> 
##content 
</div> 
</div> 

Meine CSS wie folgt ist,

#wrap{ 
color: #000; 
background: #fff; 
margin: 0px auto 0; 
width:800px; 
} 
#leftnav{ 
float:left; 
width:181px; 
min-height:600px; 
padding:10px; 
margin-left:11px; 
background-color:#CCC; 
} 
#middle { 
float:left; 
width:538px; 
min-height:580px; 
padding:20px; 
margin-left:10px; 
} 

kann jemand helfen mit diesem Thema in?

Antwort

1

Sehen Sie, ob Ihren Bedarf erfüllt.

+0

Vielen Dank für die Antwort, das hat mir wirklich sehr geholfen – Jayaram

0

Es gibt keine magische Lösung, das zu tun. CSS hat nichts, um die Höhe eines Elements entsprechend der Höhe eines anderen, völlig unabhängigen Elements zu justieren.

Sie können weiterhin Problemumgehungen verwenden, aber beachten Sie, dass all diese Problemumgehungen evil sind.

  • Tabellenlayouts verwenden. Ja, das nervt, aber es gibt Ihnen das erwartete Ergebnis.
  • Passen Sie die Höhe mit JavaScript an, wenn das Dokument fertig ist. Natürlich müssen Sie berücksichtigen, dass einige Ihrer Benutzer JavaScript nicht aktiviert haben.
  • Ändern Sie Ihr Design. Wenn Ihr linkes Seitenfeld beispielsweise einen schwarzen Hintergrund und eine Breite von 200 Pixeln aufweist, können Sie einen schwarzen 200-Pixel-Rahmen für den mittleren Bereich festlegen, den verbleibenden Platz ausfüllen und den linken Rahmen schweben lassen, um den Rahmen zu verschieben.

Sie können auch versuchen, mit Eltern <div/> s zu spielen. Wenn Sie zum Beispiel einen Rahmen zu Ihrer linken Seitenfläche benötigen, der die gesamte Höhe der Seite ausfüllt, können Sie einen Rahmen für die übergeordnete <div/> und einen linken Rahmen für Ihr Element der mittleren Abteilung festlegen.

Verwandte Themen