0

次のコードを取得しましたが、これはうまくいきません。

<div id="wrap">
    <div class="navigation">    
        <ul>      
            <li>
            </li>
        </ul>
     </div>


     <div id="main">
       Content
     </div>
</div>

ラップの高さを 100% にしたい。これはうまくいきます。しかし、#main div も 100% の高さにしようとすると、そうではありません。この div は常にコンテンツの高さに折りたたまれます。

html{height:100%;}
body{overflow-y:scroll; margin:0px; padding:0px; height:100%;}
#wrap{
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */ 
    height:100%; /* Mindesthöhe für den IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
}


#main{
    width: 980px !important;


    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;


}

誰かがこの問題を解決するのを手伝ってくれませんか? 前もって感謝します

4

2 に答える 2

5

のスタイルを変更しwrapます。ライブデモ

#wrap {
    min-height: 100%; /* Minimum height for modern browsers */
    height:100%; /* Minimum height for IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
    border:1px solid blue;
}
于 2013-02-05T18:36:11.290 に答える
1

あなたの場合、 #main div を必ずしも 100% に拡張する必要があるとは思えません。拡大する必要があるのは赤い背景です。

「偽の背景」を使用することをお勧めします。を使用position:fixedすると、ページと一緒にスクロールしない赤い背景を追加できます。残りのコンテンツはスクロールできます。このようなもの。

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

div#background {
  position: fixed;
  width: 100%;
  height: 100%;
}

div#background div#color {
  position: relative;
  background-color: red;
  width: 980px;
  height: 100%;
  margin: 0px auto;
}

div#nav {
  position: relative;
  background-color: #FFF;
}

div#main {
  position: relative;
  width: 950px;
  margin: 0px auto;
}
<div id="background">
  <div id="color"></div>
</div>

<div id="nav">NAVIGATION<br />even two lines<br /> or more</div>

<div id="main">
  <p>CONTENT GOES HERE</p>
</div>

于 2013-02-05T19:05:00.167 に答える