CSS圣杯（液体主，固定的权利），添加DIVs不扩展与少量的内容？

我使用A List Apart的“Holy Grail”作为固定右栏的液体主栏（他们的栏也显示了左栏，但我已将其删除）。我在主列区域和右列区域添加了DIV，这些额外的DIV有边框（这也有助于我们看到DIV的尺寸）。CSS圣杯（液体主，固定的权利），添加DIVs不扩展与少量的内容？

当我的DIV在主列中有大量的内容时，它强制DIV延伸到右列前10点（这是我希望它的行为）。

当我的DIV在主列中有少量内容时，DIV环绕内容并且不会延伸到右列之前的10 px点。我希望它能延续。我试过添加宽度：100％，但这会导致DIV过度膨胀。我想避免使用99％等东西。任何想法如何我可以做到这一点？我的HTML和CSS如下。

<html><head> 
    <style> 
    body {min-width: 400px;   /* 2 x RC fullwidth */} 
    #container {padding-right: 177px;  /* RC fullwidth + CC padding */} 
    #container .column { /* position: relative; */ float: left;} 
    #container .maintry1 { /* position: relative; float: left; */ padding:10px; border: 1px solid #cbcbcb; background-color:#fff;} 
    #container .maintry2 { /* width:100%; position: relative; float: left; */ padding:10px; border: 1px solid #cbcbcb; background-color:#fff;} 
    #container .rightnav { /* position: relative; float: left; */ padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:0px; border: 1px solid #cbcbcb; background-color:#fff;} 
    #center { padding: 10px 10px; /* CC padding */ width: 100%;} 
    #right {width: 147px;    /* RC width */ 
     padding: 10px 10px 10px 0px;   /* RC padding */ 
     margin-right: -100%; 
    } 
    #footer {clear: both;} 
    /*** IE Fix ***/ 
    * html #left {left: 150px;    /* RC fullwidth */} 
    /*** Just for Looks ***/ 
    body {margin: 0; padding: 0; font: 14px Arial, Helvetica, sans-serif; background-color: #f6f6f6; color: #000; margin:0; padding:0;} 
    #center {background-color: #f6f6f6;} 
    #right {background-color: #f6f6f6;} 
    #container .column {background-color: #f6f6f6;} 

    #Group1 { display:inline-block; width:33%; background-color:#ff0000;} 
    #Group2 { display:inline-block; width:33%; background-color:#00ff00;} 
    #Group3 { display:inline-block; width:33%; background-color:#0000ff;} 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="center" class="column"> 
      <div class="maintry1"> 
      <p>#1. This DIV has a large amount of content and forces the DIV to encompass the intended area.<br> 
      test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p> 

      <div id="Group1"> 
       <ul> 
       <li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li> 
       </ul> 
      </div> 
      <div id="Group2"> 
       <ul><li>test</li></ul> 
      </div> 
      <div id="Group3"> 
      <ul><li>test</li></ul> 
      </div> 

      </div>  
      <br> 
      <div class="maintry1"> 
      <p>#2. This DIV has a small amount of content.<br> The DIV does not extend to the end of the intended area like the 1st DIV.<br> How can I get this DIV to go expand to the right with the intended 10px padding?</p> 
      </div> 
      <br> 
      <div class="maintry2"> 
      <p>#3. This is the same as #2, but it has width:100% and it extends too far.</p> 
      </div> 
     </div> 
     <div id="right" class="column"> 
      <div class="rightnav"> 
      <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p> 
      </div> 
     </div> 
    </div> 
    </body> 
    </html>

UPDATE：以下是有关我的评论上12/12/2011 2个快照：

老： enter image description here

我修复？ enter image description here

UPDATE 12/13/2011

咕噜咕噜叫嗨，

非常感谢您的后续。代码很有帮助。另外，盒子模型对我的理解很有帮助。例如，我想关闭颜色，并在某些DIV上打开边框，这似乎打破了添加到100％的规则。当有组DIV和我设置每个33.33％，然后我有两个边界为1px（99.99％+ 2像素）的DIV，这也看起来超过100％。当我设定为33％时，现在基于我的屏幕尺寸似乎还可以，但这看起来并不科学。那里有挤压我的边界的首选方法吗？我将针对3,5,8和12列（可能更多）对此进行不同的迭代，因此边界将开始累加并可能产生影响。我希望包装尽可能接近100％。我已经更新了小提琴：

http://jsfiddle.net/zenfiddle/yUPCC/2/

而且，这也许是适当的另一个问题，但也许有一个快速的解决，我们可以在这里处理。我更新的小提琴将边框显示为停止DIV包装的位置。我希望边界跨越父DIV的高度。我意识到有很多方法可以解决这个问题，并且已经有不同的作者/开发者讨论过。有没有一个快速和完善的解决方案？无论采取什么方法，我都会重新计算3,5,8和12列。

来源

2011-12-11 webdude77

你可以试试这个：

#container .column { 
    /*position: relative;*/ 
    float: left; 
} 
#container .maintry1 { 
    /*position: relative; 
    float: left;*/ 
    padding: 10px; 
    border: 1px solid #cbcbcb; 
    background-color: #fff; 
} 
#container .maintry2 { 
    /*width: 100%; 
    position: relative; 
    float: left;*/ 
    padding: 10px; 
    border: 1px solid #cbcbcb; 
    background-color: #fff; 
} 
#container .rightnav { 
    /*position: relative; 
    float: left;*/ 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    border: 1px solid #cbcbcb; 
    background-color: #fff; 
}

我注释掉，你可以删除CSS规则，它应该有，你想有效果。

当你设置一个float：left; 。列，你不必浮动其中的div。 Divs默认显示为display：block，所以它们自动采用100％的宽度。

也见这里： http://jsfiddle.net/Fwta6/3/

更新（2011年12月13日）

我会做同样的方式，由浮动3周的div留下，让他们显示在一行。我更新了代码：http://jsfiddle.net/yUPCC/

让我们分开。

* { 
    margin:0; 
    padding:0; 
}

我删除了身体的最小宽度。当#Groups具有最小宽度和.rightnav固定宽度，它是没有意义的最小宽度设置为body，它比所述一个从#Groups

body { 
    font:14px Arial, Helvetica, sans-serif; 
    background-color:#f6f6f6; 
    color:#000; 
} 

.column { 
    float:left; 
    background-color:#f6f6f6; 
    padding: 10px; 
} 

.rightnav { 
    border:1px solid #cbcbcb; 
    background-color:#fff; 
    padding: 10px; 
} 

#center { 
    width:100%; 
    background-color:#f6f6f6; 
    padding:10px; 
} 

#right { 
    width:147px; 
    margin-right:-100%; 
    background-color:#f6f6f6; 
    padding:10px; 
}

较小我经常使用overflow:hidden代替float:none或clear:both。您必须将其添加到包含浮动元素的元素。通过这个，你也避免了你提到的“溢出/溢出”。 MiG在这个问题的另一个答案中解释的是一样的。

#Groups { 
    overflow:hidden; 
    min-width:600px; 
    width:100%; 
}

而是在#Groups加入float:left到每一个DIV，你可以通过下面的解决这些问题。

#Groups div { 
    float: left; 
    width: 33%; 
}

如果您在#Groups设置填充到彩色的div，他们不会内嵌显示，因为盒模型，（http://www.w3schools.com/css/css_boxmodel.asp）。它会简单地计算33％+ 10px，如果乘以3就会超过100％。这就是为什么您可以为子元素（在本例中为ul）设置边距以获得“填充”。

#Groups ul {margin: 10px; } 
#Group1 { background-color:red; } 
#Group2 { background-color:#0f0; } 
#Group3 { background-color:#00f; }

我删除的div之间的<br />，而是设置一个margin-bottom到的div。

.maintry1, 
.maintry2 { 
    border:1px solid #cbcbcb; 
    background-color:#fff; 
    padding: 10px; 
    margin-bottom: 10px; 
}

我希望这是你想要的。我不知道这是不是最好的实践CSS，但它的工作原理，这就是我们想要的。

来源

2011-12-11 15:18:16 Gchtr

普尔：这工作得很好。我有一个相关的后续问题。如上所示，我需要在DIV中添加更多的DIV（我已经使用您的建议和我的额外DIV（Group1，Group2和Group3）更新了代码。由于某些原因，这3个组正在调整到底部，或者真的，有某种steppage的问题。这是显而易见的，当1组有更多的内容（例如组别1比第2组和第3组更多的内容）。我怎样才能调整这3个群体？ – webdude77

你使用哪种浏览器？你在工作或者你的浏览器显示的内容与我的不同， – Gchtr

Hi Purr：附加的是2张图片，第一张是问题的截图，第二张是我的想出来解决这个问题，我做的是我添加了包装器“#Groups”，然后我将这三组向左移动，我不知道这与我们在CSS代码中使用的策略是否相冲突。你认为这是一个有效的解决方案吗？有没有更好的方法来做到这一点？ – webdude77

我使用的List Apart的“圣杯”，用于固定右列

液体主塔这比你所提供的代码要简单得多，甚至支持IE6！您可以减少的加价到这一点：

<div class="container"> 
    <div class="right">Test</div> 
    <div class="left">Test</div> 
</div>

用下面的CSS：

.container { 
    overflow:hidden; 
} 
.left { 
    margin-right:250px; 
    /* The width of the right column + margin + border, e.g. computed box size */ 
} 
.right { 
    float:right; 
    width:250px; 
    border:1px solid #ccc; 
}

的jsfiddle：http://jsfiddle.net/KHerm/

这个工程由于.left没有真正考虑.right由于float.right。您可以将其展开为三列，但是需要更多列，并且您需要全部列出。overflow用作的clearfix。

来源

2011-12-11 16:04:09 Mig

CSS圣杯（液体主，固定的权利），添加DIVs不扩展与少量的内容？

回答

相关问题