Question

我使用了很多方法来为div和整个页面制作一个灵活的高度但是没办法。

我想做的是：

标题后页面中有2列（right_side，left_side）左右两侧将包含灵活的内容。

所以我需要两列的高度都是灵活的。也希望右侧高度取决于左侧，因为也许文章会比正确的内容更高。

我试过“身高”和“最小身高”，但没办法

这是我的代码

<html style="min-height: 100%;">

<body style="min-height: 100%; width: 980px; border-right: 2px solid black;  
  border-left: 1px solid black; margin: 0 auto;">

    <div><img src="header.jpg"/></div>

    <div id="content" style="min-height: 100%">
    <div id="right" style="background: red; float:right; width: 280px;  min-height: 100%;">my flexible right content</div>
    <div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;">
    <p>my flexible article </p>
    <p>my flexible article </p>

   </div>
  </div>

  </body>


</html>

Answer 1

试试这个：http://jsfiddle.net/mcfarljw/erdH7/

如果你想要纯CSS和HTML，你将需要在div中使用一些div来获得一个列与另一个列灵活的效果。你可以为html格式做这样的事情。

<div id="container2">
    <div id="container1">
        <div id="col1">
        </div>
        <div id="col2">
        </div>
    </div>
</div>

我强烈建议您使用对div的引用将CSS样式移动到头部，或者将它们放在一个单独的链接CSS文件中。

基于：http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

整个页面和div的灵活高度

1 个答案: