0

私はcssをこのための解決策を見つけようとしています。ページの上部にリストメニューがあり、その下にコンテンツを含むdivがあります。コンテンツdivには、残りのビューポートの高さの100％が常に含まれている必要があります。ブラウザのスクロールバーは非表示にする必要があり、コンテンツdivにはスクロールバーが必要です。ここまで問題ありません。このために、私はcontent div position：absoluteとtopvalueを与えました。

私の問題は、ユーザーがブラウザのサイズを変更すると、メニューが新しい行にブレーキをかけ、コンテンツに修正された「トップ」値があるため、メニューがコンテンツとオーバーラップすることです。

1つの解決策は、ブラウザのサイズ変更時にメニューdivの高さを読み取り、コンテンツdivの位置を設定することです。しかし、私はjsを避けるのが好きです。私の質問は、これをcssだけで実行できるかということです。

以下の例をご覧ください。

乾杯、

トニー

<!DOCTYPE html>
<html lang="en">
<head class="html5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

<style>
html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#nav{
    border:1px solid black;
    overflow: auto;
    height: auto !important;
    height: 50px;
    min-height: 50px;
    }

#nav ul li{
    list-style-type: none;
    float:left;
    margin: 0 40px 0 0;
}   

#content{
    overflow:scroll;
    height:100%;
    top:50px;
    position: absolute;

}

#content p{height:1024px;border:1px solid red;margin:0;}

</style>

</head>
<body>

  <div id="nav">
    <ul>
     <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
       <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
          <li><a href="#">Menu Item</a></li>
           <li><a href="#">Menu Item</a></li>
     </ul>
   </div>


  <div id="content">
    <p class="article">here goes the content</p>
  </div>

</body>
</html>
4

1 に答える 1

0

navdivを挿入し、 content1つのdiv内にcontainer：

<div id="container">
   <div id="nav">
      <ul>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
         <li><a href="#">Menu Item</a></li>
      </ul>
   </div>
   <div id="content">
       <p class="article">here goes the content</p>
   </div>
</div>`

CSSで：

#container {
   width: 1024px;
   margin: 0 auto;
}
#nav {
   float: left;
   width: 100%;
   height: 250px;
}
#content{
   float: left;
   width: 100%;
}
于 2012-11-26T13:41:15.233 に答える