垂直DIV液體佈局問題

考慮到以下HTML/CSS，實現垂直「液體」DIV（＃ribbon1和＃ribbon2）的最簡單方法是什麼？隨着#content DIV的內容增長？垂直DIV液體佈局問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Test</title> 
     <style type="text/css"> 
      <!-- 
      html { 
       height: 100%; 
      } 

      body { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
      } 

      #container { 
       position: absolute; 
       left: 50%; 
       margin-left: -400px; 
       top: 0px; 
       height: 100%; 
       width: 800px; 
      } 

      #ribbon1 { 
       position: absolute; 
       left: 702px; 
       top: 0px; 
       width: 46px; 
       height: 100%; 
       background-color: red; 
      } 

      #ribbon2 { 
       position: absolute; 
       left: 752px; 
       top: 0px; 
       width: 30px; 
       height: 100%; 
       background-color: blue; 
      } 

      #content { 
       left:16px; 
       width:687px; 
      } 
      --> 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="ribbon1"></div> 
      <div id="ribbon2"></div> 
      <div id="content"> 
       <p>Lorem ipsum ea pro lorem tantas platonem, duo ut abhorreant percipitur. Quo elit aperiri disputationi at, cum ex choro vivendo delicatissimi, ne magna conceptam adolescens has. Admodum persecuti reprimique nec ei. Te possim labitur perpetua vix, ad eos audire vituperatoribus. No dicat repudiandae est, nec an assum oporteat concludaturque. Ei pro accumsan consequat dissentiet, pri malis affert at.</p> 
       <p>Sed ut diam iudico, vis mutat decore ea. Tota illum officiis ei eum, per mucius consequuntur ex, quo tota vocibus ad. Et liber similique vituperata mel, an inani utamur principes qui. Nostro definitionem ius ad. Usu viris tritani et, ea pri noster takimata delicatissimi. Sea dictas recteque convenire ex, malorum percipit qui ut, an quod placerat ius. Ex sed antiopam principes, te posse alienum est, sea delenit debitis conceptam at.</p> 
       <p>Ad clita audire conceptam nec. Eos ei corpora tincidunt dissentiunt, qui ne vocent eripuit habemus. Eum ut oportere incorrupte reformidans, eu ius dicit tibique intellegebat. Ut has noluisse insolens, saepe integre eu mel. Ut vel prima periculis constituam, id nisl principes cotidieque sed, ad per nullam virtute instructior. Et has error oblique nominavi, ut pro magna summo labitur.</p> 
       <p>Malorum facilisis ei nec, erant molestiae vim ut. Velit dolor invidunt ut cum. Etiam timeam docendi vix ad, in alii latine hendrerit qui. Ad has idque option, probatus tractatos ut qui, sit altera latine suscipiantur ex. In omnium platonem vel, sea no sumo denique. Ei mei vidisse invidunt interpretaris.</p> 
       <p>Quo corrumpit gubergren at, ne mel omnes adipisci ullamcorper, scripserit efficiantur mei eu. In reque mazim mea. Mea ex sonet inermis volutpat. Habemus erroribus in sed, no est mutat clita. Harum urbanitas scriptorem qui at, pri cu expetenda referrentur. Has alia ullum tractatos te, his justo laoreet consetetur ex.</p> 
       <p>Et oratio consul pro, ei pri equidem tibique ullamcorper. Mucius eligendi assentior cu sea. His ut tota postulant accommodare, putant eligendi scaevola id cum, option vocibus scribentur est in. Pro splendide appellantur ut, an elit omnis audire vix. Habeo tincidunt usu id, sed diam splendide vituperatoribus te.</p> 
       <p>Tractatos mediocrem ea usu, id deleniti recusabo cotidieque cum. Cu mea eruditi salutandi. Eu usu dolore partem salutatus, detracto fabellas mel no. Ex ius falli prompta invidunt, et est possim constituam dissentiunt.</p> 
       <p>Legendos prodesset ad sed, labore viderer periculis ad eam, stet sadipscing id pri. Ex sea quis quidam, no natum adipiscing efficiendi eum. Noluisse antiopam repudiare ex vel, tation principes eam ea. Eam illud oratio tempor ei, feugiat dolorum accusamus mel ei. Cu cum suas nibh.</p> 
       <p>Natum primis apeirian nec an, te duo eros tation lucilius. Iusto dicam necessitatibus est at, at nominati atomorum his. Aliquid verterem laboramus ei has, suas augue postea et pro. Velit euripidis ne est, an inermis minimum qui. Cum dico animal neglegentur no.</p> 
       <p>Pro probo veritus cu. Ex quis pertinax cum. Sumo senserit in ius. Dicam melius in cum. Nobis partem te usu, ut suas ornatus nec, ut tantas mucius possit ius. Unum definitiones pri ne, suas legimus volutpat sit ea. Eos dicat senserit electram id, te usu congue delicata reformidans, pro ut cibo minim.</p> 
      </div> 
     </div> 
    </body> 
</html>

我已閱讀，絕對定位DIV的孩子不允許他們的父母DIV與他們成長，我想避免寫一些JS會動態調整大小它們。任何幫助，將不勝感激！

來源

2011-05-03 chattsm

如果色帶只是爲了美觀而不是爲了容納內容，請使用imjared的解決方案。如果您打算在內容中添加內容，並且內容永遠不會將主要內容下方的功能區推到底部，那麼ramblex的解決方案就很好（只要您不關心IE6 ......並且我們應該停止關心它們）關於IE6！）。 – squidbe 2011-05-03 21:52:04

更改#container以下似乎適用於我在Chrome，Safari，歌劇和FF（未經測試的IE）。

#container { 
    position: relative; 
    left: 50%; 
    margin-left: -400px; 
    top: 0px; 
    width: 800px; 
}

來源

2011-05-03 21:34:31 ramblex

幹得好！這似乎也在IE7中工作，並且是最簡單的答案。我現在在Chrome和FF中遇到的唯一問題是「帶狀」DIV從頂部填充，但這是一個單獨的問題/問題。 – chattsm 2011-05-04 09:07:37

你可以做到以下幾點：

.ribbon1{position:absolute;left0;top:0;bottom:0;right:50%;} 
.ribbon2{position:absolute;left:50%;top:0;bottom:0;right:0;}

來源

2011-05-03 21:17:02 bigblind

您可以添加第二個div和修改絕對定位的絲帶是邊境權利。我並不總是非語義分區的忠實粉絲，但在某些情況下，它只是最簡單的解決方案。

<html> 
    <body> 
     <style type="text/css"> 
     html { height: 100%; } 
     body { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
     } 
     #container { 
      position: absolute; 
      left: 50%; 
      margin-left: -400px; 
      top: 0px; 
      height: 100%; 
      width: 800px; 
     } 

     #content { 
      left:16px; 
      width:687px; 
      border-right: 15px solid red; 
      padding-right: 10px; 
     } 
     #content2 { border-right: 15px solid blue; } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <!--<div id="ribbon1"></div>--> 
     <!--<div id="ribbon2"></div>--> 
     <div id="content"> 
      <div id="content2"> 
      <p>Lorem ipsum ea pro lorem tantas platonem, duo ut abhorreant percipitur. Quo elit aperiri disputationi at, cum ex choro vivendo delicatissimi, ne magna conceptam adolescens has. Admodum persecuti reprimique nec ei. Te possim labitur perpetua vix, ad eos audire vituperatoribus. No dicat repudiandae est, nec an assum oporteat concludaturque. Ei pro accumsan consequat dissentiet, pri malis affert at.</p> 
      </div><!--/#content2--> 
     </div> 
    </div> 
</body>

只是一定要適當地修改填充。

來源

2011-05-03 21:22:43 imjared

垂直DIV液體佈局問題

回答

相關問題