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

0

どういうわけか、このトピックのこの元の質問で同じ状況に陥っていることに気付きました..単純で最も簡単な解決策は、「David Taiaroa」によって回答され、正解になりました。これにより、問題が完全に解決されました!

デビッド・タイアロアに感謝します、あなたは命の恩人です！

于 2013-11-08T23:46:15.703 に答える
0

これがあなたが望むものかどうかはわかりませんが、いずれにせよ、css で各 div の高さを明示的に設定できます。

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

これは、同じ高さの 2 つ以上の div が必要になるたびに私が使用するテクニックです。どのように機能するかは説明しません。 -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 に答える