Css不同的高度

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

我試着在計算器和othes網站很多解決方案，但我不能改變我的需要。

任何人都可以幫助我嗎？

Answer 1

如果我正確理解你的問題，你希望左側和右側的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增加額外的寬度，所以這可能會導致您的寬度計算關閉。如果您需要邊框，請查看the box-sizing: border-box方法，該方法會強制div內的邊框。

希望這會有所幫助！

Answer 2

我看不出有任何高度不同的問題，但我建議你使用表格;在這種情況下：

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

通過這種方式，兩邊'將具有相同的高度。