Question

我希望在处理php表单后，左列与右列的高度相同。这是html代码：

<div class="header">
</div>
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>

我希望您能帮忙设置css配置！

.header, .footer{
text-align: center;
background-color: #777;
color: white;
border-style: dotted;
border-width: 1px;
border-color: black;
width: 100%;
}

.footer{
text-align: center;
line-height: 100%;
float: left;
height: 5%;
margin-bottom: 3px;
}

.left{
border-style: dotted;
border-width: 1px;
border-color: black;
background-color: #CCC;
float: left;
width: 11%;
min-height: 500px;
margin: 2px 0px 2px 0px;
padding: 0px 0px 0px 0px;
height: 100%;
}

.right{
border-style: dotted;
border-width: 1px;
border-color: black;
width: 88%;
float: right;
min-height: 500px;
margin: 2px -2px 2px 8px;
padding: 0px 0px 0px 0px;
height: 100%;
}

我是php / html / css语言的新手。

我已经查看了其他主题，但没有一个解决方案适合我。

我设置了一个CSS，但它只适用于IE。 Chrome和FF没有用。

哦，我想要动态地工作。并且没有px中的高度限制。仅限％。

你能帮助我吗？

Answer 1

这是一个CSS解决方案：http://jsfiddle.net/panchroma/8Szh5/

我在左右div中添加了一个大的填充和一个同样大的负边距，然后包裹它们的容器div都隐藏了溢出。

<强> CSS

.left{
padding-bottom: 99999px;
margin-bottom: -99999px;
/* more stuff */
}  

.right{
padding-bottom: 99999px;
margin-bottom: -99999px;
/* more stuff */
}

.container{
overflow: hidden;   
}

<强> HTML

<div class="container">

<div class="left">
</div> <!-- end left -->

<div class="right">
</div> <!-- end right -->

</div> <!-- end container -->

<div class="footer">
</div> <!-- end footer -->

此技术也适用于跨浏览器。

为简单起见，我注释了一些额外的CSS。在这个例子中，我还删除了这些div周围的边框。请记住，边框实际上为div添加了额外的宽度，因此这可能会使您的宽度计算失效。如果你需要边框，请查看box-sizing: border-box method强制div内的边框。

希望这有帮助！

Answer 2

这是我每次需要2个或更多同等高度的div时使用的技术，我不会解释它的工作原理Matthew James Taylor做得很好：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

希望这有所帮助，它确实让我免于头痛几次。

Answer 3

如果使用表格是不可能的，请尝试：

#container {
    display:flex;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-box;
    display:-moz-flex;
}

这应该展开#left和#right框以填充容器的整个高度。

Answer 4

.left, .right { height: 100%; }
.container { height: 400px; }

但是你需要为css创建一个单独的文件，并在html的头部调用它。

Answer 5

我不确定这是否是您想要的，但无论如何您可以在css中明确设置每个div的高度：

.left {
   height: 300px;
   ...other attributes...
}
.right {
   height: 300px;
   ...other attributes...
}

Answer 6

不知何故，我发现自己处于这个主题的原始问题的相同情况......我最终成为正确答案的简单和最简单的解决方案被“David Taiaroa”回复，这完全解决了我的问题！

谢谢你 David Taiaroa ，你是救星！

CSS等于高度div

6 个答案: