CSS等於高度div

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方法 ，該方法強制div內的邊框。

希望這可以幫助！

Answer 2

這是我每次需要2個或更多相同高度的div時使用的技術，我不會解釋它的工作原理Matthew James Taylor做得很好： http ： //matthewjamestaylor.com/blog/equal-height-columns -Cross-瀏覽器的CSS-NO-黑客

希望這有所幫助，它肯定讓我免於頭痛幾次。

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 ，你是生命保護者！