すべてのメニューヘッダーをスクロールバーでスクロールするにはどうすればよいですか？

長い休憩の後、私は現在、メニューと右側のスクロールペインでページを作成しようとしています。すべてのメニューヘッダーをスクロールバーでスクロールするにはどうすればよいですか？

スクロールバーがページの高さ全体に降下するのではなく、垂直方向に約400-600ピクセル（すべてのコンテンツがスクロールされています）になることを除いて、正常に機能します。私は上に固定して滞在するとうまく動作しますが、メニュー。今私の質問は、残りのウィンドウ（メニュースペースを除く）の下に行くスクロールバーを行うことができますか？

HTMLファイル：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Mytitle</title> 
<link rel="stylesheet" href="default.css"> 
</head> 
<body> 
<div id="header"> 
    <div name="phone"> 
     <img src="images/phone" alt="phone" /> 000-000-000-000 
    </div> 
    <div name="eMail"> 
     <a href="mailto:[email protected]"> 
      <img src="images/email.png" alt="email"> 
      [email protected] 
     </a> 
    </div> 
    <div id="menu"> 
     <img src="images/logo.png" /> 
     <div name="Mh"> 
      Home 
     </div> 
     <div name="Mw"> 
      blah 
     </div> 
     <div name="MOffers"> 
      Offers 
     </div> 
     <div name="mD"> 
      T 
     </div> 
     <div name="mI"> 
      Infos 
     </div> 
     <div name="mC"> 
      Kontakt 
     </div> 
     <div name="mI"> 
      Impressum 
     </div> 
    </div> 
    <div id="banner"> 
     BANNER 
    </div> 

    <div id="content"> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
     a <br /> 
      b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     b <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     c <br /> 
     b <br /> 
     <div name="w"> 

     </div> 
     <div name="a"> 

     </div> 
     <div name="o"> 

     </div> 
     <div name="d"> 

     </div> 
     <div name="Infos"> 

     </div> 
     <div name="Contact"> 

     </div> 
     <div name="Impressum"> 

     </div> 
    </div> 

</div> 
</body> 
</html>

CSSファイル：私はオーバーフローがあったにもかかわらず、何のスクロールバーがなかったことを見た後に追加#content部分：ここで注意点としては

body { 
} 


#header { 
    position: fixed; 
    width: 100%; 
} 


#content { 
    width: 99%; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x:hidden; 
}

表示されます。

出典

2017-02-05 Thomas

ソリューションのためのflexboxを見てください –

少なくとも私はflexboxの外に終わることができます – Thomas

Gerdiは道がフレキシボックスで言ったように、これを試してみてください：https://jsfiddle.net/Lm2dr14o/1/

body, html { 
    height:100%; 
    overflow:hidden; 
} 
#header { 
    position:fixed; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 

    display:flex; 
    flex-direction:column; 
} 
#header>div { 
    flex-grow: 1; 
} 
#content { 
    width: 98%; 
    height:98%; 
    margin: 1%; 
    overflow-y: scroll; 
    overflow-x:hidden; 
    flex-grow: 2; 
}

・ホープこのヘルプます。

出典

2017-02-05 18:52:29 Baro

すべてのメニューヘッダーをスクロールバーでスクロールするにはどうすればよいですか？

答えて

関連する問題