0

我正在学习 html、css 和 php。我用页眉、菜单（左）、内容（右）和页脚创建了这个结构。在'right'里面有一个php表单。当用户将表单发送到服务器时，服务器会用一个表格来回答。此表可以大于“左”高度。这样左和右处于不同的高度。

HTML结构：

<div class="header">
<h1>AGENDA ELETRÔNICA</h1>
</div>
<div class="container">
<div class="left">
<ul>
<ol><a class="menu" href="index.php">Home</a></ol>
<ol><a class="menu" href="cadastrar_pessoas.php">Cadastrar</a></ol>
<ol><a class="menu" href="buscar_pessoas.php">Buscar</a></ol>
<ol><a class="menu" href="gerenciamento.php">Alterar</a></ol>
</ul>
</div>

<div class="right">
FORM PHP
</div>
</div>
<div class="footer">
<small><a class="rodape" href="">Sobre</a></small>
<small> || </small>
<small><a class="rodape" href="">Contato</a></small>
<small> || </small>
<small><a class="rodape" href="">Ajuda</a></small>
</div>

和 CSS 结构直到现在：

.container{

}

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

我在 stackoverflow 和其他网站上尝试了许多解决方案，但我无法满足我的需求。

谁能帮我？

4

2 回答 2

0

我看不出高度不同有什么问题，但我建议你使用桌子；在这种情况下：

<div id="header">...</div>

<table width="100%">
<tr>
<td valign="top id="left">....</td>
<td valign="top id="right">....</td>
</tr>
</table>

<div id="footer">...<.div>

这样，两个“边”将具有相同的高度。

于 2013-01-31T13:56:42.913 回答
0

如果我正确理解您的问题，您希望左右 div 始终具有相同的高度，而右 div 中的内容并不总是已知的。

这是一个无表格的 CSS 解决方案：http: //jsfiddle.net/panchroma/Hxh9x/

我为左右 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="header">
</div> <!-- end header -->

<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-31T20:49:20.323 回答