Question

要描述我的项目 - 我有一个div元素，如果添加更多内容，它的大小会增加 - 父div也会增加它的大小。

然后我有两个div元素，一个向左浮动，另一个在右侧。我将高度设置为100％，但这不起作用。我怎么能实现这样的行为？

http://109.91.124.194/nucleareducated_2/index.php

Answer 1

这是一个典型的问题，遗憾的是没有一个简单的解决方案。快速谷歌搜索相同高度的列，你会看到我的意思。您的代码无效，因为高度：100％不起作用，除非父容器具有指定高度来计算100％是什么。如果没有指定的高度设置，那么高度：100％默认为高度：自动，你最终得到的div不会扩展到父级的大小。

正如您可能已经猜到的那样，设置父div的高度非常困难，因为它会发生变化。答案包括使用Javascript动态设置高度，或者更经常地设置高度，只需伪造它以使列看起来扩展到父级的大小。

IMO最好的方法是使用css表属性，如果你只关心较新的浏览器，它不适用于IE7或更早版本。

#containerdiv {
    display:table;
}

#childdivleft, #childdivcenter, #childdivright {
    display: table-cell;
}

下一个最好的方法是在子容器的底部使用较大的填充值和一个相应的负边距。

#leftdiv,#rightdiv {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

您也可以使用 -

jQuery - Columns of Equal Height with JQuery

其他几个解决方案 - CSS - Equal Height Columns?

Answer 2

让我知道这是否是您正在寻找的：在chrome *中测试

<html>
<head>
<style>
html, body {
    height:100%;    
}

</style>
</head>
<body>
<div style="clear: both; height:100%;">
    <div class="pageShadow" style="background-color: blue; height: 100%; width: 47px; float: left;"></div>
    <div class="pageShadow" style="background-color: blue; height: 100%; width: 52px; float: right;"></div>
    <div class="pageShadow" style="background-color: green; margin-left: 47px; margin-right: 52px;"></div>
</div>

</body>
</html>

Answer 3

也许这就是你的意思？如果你想要一个高度为100％的区域，你可以在左右div附近添加一个div。

CSS：

* { margin:0; padding:0 }
#around { background:yellow; float:left }
#left { float:left; width:40%; background:red }
#right { float:right; width:60%; background:green }
#bottom { clear:both; background:blue }

HTML：

<div>
    <div id="around">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <div id="bottom"></div>
</div>

在动态大小的元素中具有100％高度的div

3 个答案: