0

我使用了很多方法来为 div 和整个页面设置灵活的高度，但没有办法。

我想做的是：

我在页眉（right_side，left_side）之后的页面中有 2 列，左侧和右侧都将包含灵活的内容。

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

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

这是我的代码

<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>
4

1 回答 1

0

试试这个：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

于 2013-11-10T13:41:32.667 回答