0

在处理 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 为单位的高度限制。只有在 ％。

你能帮助我吗？

4

6 回答 6

2

这是一个 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 内的边框。

希望这可以帮助！

于 2013-01-31T21:02:17.627 回答
0

不知何故，我发现自己与这个主题的这个原始问题处于同样的境地......我最终成为正确答案的简单和最简单的解决方案是由“David Taiaroa”回答的，这完美地解决了我的问题！

谢谢David Taiaroa，你是救生员！

于 2013-11-08T23:46:15.703 回答
0

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

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

于 2013-01-30T17:59:27.770 回答
0

如果无法使用表格，请尝试以下操作：

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

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

于 2013-01-30T18:00:05.730 回答
0 
.left, .right { height: 100%; }
.container { height: 400px; }

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

于 2013-01-30T18:00:52.247 回答
0

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

.left {
   height: 300px;
   ...other attributes...
}
.right {
   height: 300px;
   ...other attributes...
}
于 2013-01-30T18:03:07.870 回答