CSS等高的div [英] CSS equal height divs

问题描述

我想在处理一个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。 / p>

我看过其他主题，但没有一个解决方案对我有用。

，但它只适用于IE。 Chrome和FF无法运行。

哦，我想让这个工作动态。
在px中没有高度限制。只有在％。

您能帮我吗？

解决方案

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 ，它会强制

希望这有助于！

I want the left column is the same height of the right column after processing a php form. This is the html code:

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

I would like your help to set the css configuration!

.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%;
}

I'm new in the languages ​​php / html / css.

I've looked at other topics, but none of the solutions worked for me.

I set a css, but it only worked for IE. Chrome and FF didn't work.

Oh, i want this working dynamically. And without height limits in px. Only in %.

Can you help me?

解决方案

Here's a CSS solution: http://jsfiddle.net/panchroma/8Szh5/

I have added a large padding and an equally large negative margin to the left and right divs, then the container div which wraps around them both has overflow hidden.

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

This technique works well cross-browser as well.

For simplicity I commented out some of your extra CSS. In this example I also removed your borders around these divs. Remember that borders acutally add extra width to the div, and so this can throw your width calculations off. If you need borders, check out the the box-sizing: border-box method which forces the border inside your div.

Hope this helps!

这篇关于CSS等高的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！