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に幅を追加するため、幅の計算が失敗する可能性があることに注意してください。境界線が必要な場合は、div内に境界線を強制する box-sizing：border-boxメソッドを確認してください。

お役に立てれば！

于 2013-01-31T20:49:20.323 に答える