3

かっこいいので、HTMLでCSSを約1か月調査してきましたが、まだ苦労していることの1つは、要素を取得して、子の高さに基づいて高さを調整する方法です。たとえば、さまざまな時期に印刷された記事のアーカイブへのリンクがあるページに移動するニュース ボタンがあります。記事の長さはさまざまですが、すべてを保持するコンテンツ要素により、常に記事がオーバーフローし、次に、スクロールを使用する必要があります。内部の子要素に合わせて高さを設定する必要があります。

私が試してみました：

height: 100%;

要素を検査すると、メトリックは 647px であると表示されます。そして、それはそこにとどまります

height: auto;

高さを 200px に設定すると、すべてがオーバーフローします。

これは、html ネストのセクションです。

 <div id="news_head">
 </div>
 <div id="news_content">
   <div id="news_scroll">
   </div>
   <div id="news_main_page">
   </div>
   <div id="side_archive">
   </div>
 </div>
 <div id="disquss_section">
 </div>

このための css は次のとおりです。

#news_head {
  border: 1px solid red;
  height: 200px;
  width: 100%;
}

#news_content {
  border: 1px solid red;
  height: 100%;
  width: 1200px;
  margin: 5px auto;
}

#news_scroll {
  border: 1px solid green;
  width: 1198px;
  height: 200px;
}

#news_main_page {
  border: 1px solid blue;
  width: 988px;
  height: 430px;
  float: left;
}

#side_archive {
  border: 1px solid yellow;
  width: 200px;
  height: 430px;
  float: right; 
}

何が起こっているかを視覚的に見るためだけに境界線を使用しています。私はいくつかのことを読みましたが、ここでそれを実装する方法が正確にはわかりませんhttp://css-tricks.com/snippets/css/center-div-with-dynamic-height/。私はJavaScriptとjQueryも使用しているので、どんな提案も大歓迎です。

4

1 に答える 1

12

コンテナー div 内でコンテンツをフロートする場合 (フロートされていないコンテンツが他にない場合)、0 のままになりますが、これを修正するには、

<div style="clear: both"></div>

親要素が終了する前（親の直前）。私は最もエレガントな解決策ではありませんが、魅力のように機能し、私が知っている実際の代替手段はありません.

于 2012-05-16T07:02:01.720 に答える