垂直DIV液体布局问题
给定以下 HTML/CSS，实现随 #content DIV 的内容增长的垂直“液体”DIV（#ribbon1 和 #ribbon2）的最简单方法是什么？
<!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。任何帮助将不胜感激！
Given the following HTML/CSS, what is the simplest way of implementing a vertical 'liquid' DIV (#ribbon1 and #ribbon2) that grows with the content of the #content 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>
I have read that absolute positioned child DIVs don't allow their parent DIV to grow with them, and I'd like to avoid writing some JS that dynamically resizes them. Any help would be appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以添加第二个 div 并将绝对定位的功能区修改为边框右侧。我并不总是非常喜欢非语义 div，但在某些情况下，这只是最简单的解决方案。
请务必适当修改填充。
You could add a second div and modify the absolutely positioned ribbons to be border-rights. I'm not always a big fan of non-semantic divs but in some cases, it's just the easiest solution.
Just be sure to modify the padding appropriately.
将 #container 更改为以下内容似乎对我在 Chrome、Safari、opera 和 FF 中有效（未在 IE 上测试）。
Changing #container to the following seemed to work for me in Chrome, Safari, opera and FF (untested on IE).
您可以执行以下操作：
You could do the following: