Question

我正在学习html，css和php。我用标题，菜单（左），内容（右）和页脚创建了这个结构。里面'右'有一个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和othes网站上尝试了很多解决方案，但我无法改变我的需求。

任何人都可以帮助我吗？

Answer 1

我看不出有任何不同高度的问题，但我建议你使用表格;在这种情况下：

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

通过这种方式，两个“边”将具有相同的高度。

Answer 2

如果我理解你的问题，你希望左边和右边的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添加了额外的宽度，因此这可能会使您的宽度计算失效。如果您需要边框，请查看强制div内边框的the box-sizing: border-box方法。

希望这有帮助！

Css不同的高度

2 个答案: