0

HTMLページのすべての要素を含むラッパーがあります。

#wrapper {
     width: 1000px;
     height: auto;
     min-height: 100%;
     margin: auto;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
     background-attachment: fixed;
     -moz-border-radius:20px;
     -webkit-border-radius:20px;
     border-radius:20px;
}

これがHTMLコードサンプルです

 <div id="wrapper">
        <div id="uppermenu">
             <div id="container">
                  <div id="logo"> <img src="images/logo.png" height="100%"> </div>
                  <div id="banner"> <br></div>
             </div>
        </div>
        <div class="sidemenu"> [...] </div>
        <div id="guide"> [...] </div>
 </div>

このラッパーに含まれている必要のあるコンテンツに応じて高さを変更したいのですが、私が行っているように、これは発生していません。使おうとしたら

overflow: hidden;

ラッパーは、uppermenu div（含まれている必要があります）によって下にシフトされ、

clear: both;

内容の最後では何も変わりません。私はここで正しく答えられた少なくとも5つの異なる質問を試しましたが、どれも私にとってうまくいきませんでした。最後に、私が書いたラッパーセット（最小の高さを100％）は、ブラウザーの画面に完全に適合しますが、それは明らかに私が望んでいるものではありません。どんな助けでも???

編集：これがサイドメニュークラスのCSSです

.sidemenu {
      float: left;
      margin-left: 20px;
      margin-top: 20px;
      height: 200px;
      width: 150px;
      background-color: #4488ff;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      z-index: 3;
}

およびガイドIDの

#guide {
   float: left;
   margin-top: 20px;
   margin-left: 50px;
   height: 100%;
   width: 760px;
   background-color: #4488ff;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   z-index: 3;
}

アッパーメニューとコンテナ

#uppermenu {
       position: fixed;
       top: 0px;
       width: 1000px;
       height: 100px;
       margin: auto;
       background: #004465;
       z-index: 5;
}
#container {
     width: 1000px;
     min-height: 100%;
     margin: auto;
}
4

2 に答える 2

2

解決策1：明確：両方

clear：both;スタイルのブロック要素を追加します。その上にそのポイントを過ぎたフロートをクリアし、その要素の親が崩壊するのを防ぎます。http://jsfiddle.net/TVD2X/1/

長所：要素をクリアできます。下に追加する要素は、上のフロート要素と有効なcssの影響を受けません。

短所：フロートをクリアするために別のタグが必要で、マークアップが肥大化します。

注：IE6にフォールバックし、それが禁欲的な親（つまり、入力要素）で機能するようにするには、：afterを使用できません。

解決策2：表示：テーブル

display：tableを追加します。フロートを肩をすくめて正しい高さで表示するように親に伝えます。http://jsfiddle.net/h9GAZ/1/

長所：余分なマークアップはなく、非常にすっきりしています。IE6+で動作します

短所：IE6および7ですべてが正常に機能することを確認するには、無効なcssが必要です。

注：IE6および7の幅の自動は、幅が100％+パディングになるのを防ぐために使用されます。これは、新しいブラウザーには当てはまりません。

他の「解決策」に関する注記

これらの修正は、サポートされている最も低いブラウザーに戻り、グローバルで1％以上の使用率（IE6）になります。つまり、：afterを使用してもブラウザーは切断されません。

非表示のオーバーフローはコンテンツを表示しますが、要素の折りたたみを防ぐことはできないため、質問には答えません。インラインブロックを使用すると、バグのある結果が生じる可能性があり、子供が奇妙なマージンを持っているなど、テーブルの方がはるかに優れています。

高さを設定すると、崩壊が「防止」されますが、適切な修正ではありません。

無効なCSS

無効なcssは誰にも害を及ぼすことはなく、実際、今ではそれが標準となっています。ブラウザプレフィックスの使用は、ブラウザ固有のハックを使用するのと同じように無効であり、エンドユーザーに影響を与えることはありません。

結論は

私は上記の両方のソリューションを使用して、要素が正しく反応し、互いにうまく機能するようにします。同じことを行うことをお勧めします。

于 2012-10-18T19:56:09.160 に答える
0

最小の高さを取り除く：100％。これは、divの最小の高さがブラウザの高さの100％であることを意味します。これを排除すると、コンテンツに適合します

于 2012-10-18T19:41:31.627 に答える