세로 DIV 액체 레이아웃 문제

다음 HTML/CSS가 주어지면 #content DIV의 내용과 함께 성장하는 수직 '액체'DIV (# ribbon1 및 # ribbon2)를 구현하는 가장 간단한 방법은 무엇입니까?세로 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

크롬, 사파리, 오페라 및 FF (IE에서 테스트하지 않음)에서 #container를 다음으로 변경하면 나에게 적합하다고 생각됩니다.

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

출처

2011-05-03 21:34:31 ramblex

잘 했어! 이것은 IE7에서도 작동하는 것으로 보이며 가장 간단한 대답입니다. Chrome과 FF에서 현재 가지고있는 유일한 문제는 '리본'DIV가 맨 위에 패딩되어 있지만 별도의 문제/질문입니다. – chattsm

는 다음을 수행 할 수 있습니다 :

.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

답변

관련 문제