2016-05-11 2 views
0

複数のサイズの画面に対して反応的なサイトを設定しようとしています。ブートストラップサイズxs,sm,mdおよびlg不要なときにスクロールバーを消すには?

3つの小さいサイズですべてうまく動作します。つまり、必要なときにスクロールバーが右側にのみ表示されます。

はしかし、それはあまりにも広い取得しないように1024px幅を有している大型画面、上、はどのように私はそれが必要なときのみに垂直スクロールバーが表示され得ることができますか?

小さいサイズOK: enter image description here

LARGE SIZEは必要ない不要なスクロールバーがあります。 enter image description here

.pagecontent { 
 
    margin: 0 18px; 
 
} 
 
/* bootstrap override */ 
 

 
.container { 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 
.navbar { 
 
    border-radius: 0px; 
 
} 
 
.navbar-text { 
 
    float: left !important; 
 
    margin-right: 10px; 
 
} 
 
.navbar-right { 
 
    float: right!important; 
 
} 
 
.navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
.navbar-nav { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
    margin-left: 0; 
 
} 
 
.container { 
 
    width: 1024px; 
 
    padding: 0; 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    overflow-y: scroll; 
 
} 
 
html { 
 
    min-height: 100%; 
 
    /* make sure it is at least as tall as the viewport */ 
 
    position: relative; 
 
} 
 
body { 
 
    height: 100%; 
 
    /* force the BODY element to match the height of the HTML element */ 
 
    background-color: #999; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header pull-left"> 
 
      <a class="navbar-brand" href="?">Bootstrap Showcase</a> 
 
     </div> 
 

 
     </div> 
 
    </nav> 
 
    <div class="pagecontent"> 
 

 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 
     <div>this is a test line</div> 
 

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

 
</html>

補遺:私はoverflow-y: scrollを削除した場合

、私は右側のスクロールバーを取得しますが、コンテンツは、下の前に拡張しています

enter image description here

+0

あなたが私たちに与えたコードによってスクリーンショットが作成されているのではありません。このパッケージを使用する理由はありますか?ラッパーを流したままにしておきますか? – abluejelly

答えて

6

overflow-y: auto; CSS属性を使用してください。必要なときだけスクロールバーを表示します

+1

この問題を解決するには、_cough_が十分なコードを提供していなかったため、この問題は解決したものの、実際に問題は解決されていません。 – abluejelly

+2

正確には、私はこの答えを正しいとマークし、ここで新しい質問をしました:http://stackoverflow.com/questions/37167577/how-to-get-text-from-scrolling-off-bottom-of-container-まだ保持しているスクロール・バー・オン・フ –

0

CSSで.containerからoverflow-y: scroll;を削除します。そして、なぜあなたはcontainerクラスをCSSで2回リストアップしていますか?

+0

もし彼がそれを取り除くなら、彼は1つを望むときに彼を持っていないでしょう – RhysO

+0

どうしてですか?ブラウザーはページを通過する場合、スクロールを含みます。 –

+0

私はこれまでにそのようなことをしてきました。 CSSの再利用可能なスニペット(CSSアコーディオンのエンジンなど)とボイラープレートは、ビジュアルスタイリングと混同されるのではなく、この処理を受けます。しかし、この場合は、外部スタイルシートを「埋め込む」ことが考えられます。 – abluejelly

関連する問題