ブートストラップをボディ高にスクロール可能なdiv 100％

-1

ボディを100％高さに固定し、本体内のメインディビジョンをスクロール可能にし、周囲に余裕を持たせたい。このような何か：ブートストラップをボディ高にスクロール可能なdiv 100％

出典

2016-09-24 Mehdi Guelloub

??：

は、あなたの場合はスニペットを実行することはできません、これはCodePenのペンです –

jqueryを使って解決策を見つけました。私は体の高さonloadを取得し、リサイズで100pxを引く（パディングのために）。とにかくありがとうございます。 –

use css 'calc（）'はjqueryよりも簡単です！あなたのコードをきれいにすることを学ぶ。 jqueryを使用する場合、そのコードはonloadとonresizeを実行する必要があります。 –

あなたは本当にこのためにブートストラップは必要ありません！私はあなたがこれまでにしようとしているコードを表示http://codepen.io/kranzy/pen/bwqWbo

body { 
 
    margin: 0; 
 
} 
 
.full { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    overflow: hidden; 
 
} 
 
.inside { 
 
    position: relative; 
 
    /* some bit of margins */ 
 
    top: 50px; 
 
    left: 50px; 
 
    /* calculate the width, if not, weird effect. */ 
 
    width: calc(100% - 50px * 2); 
 
    height: calc(100% - 50px * 2); 
 
    /* 50px * 2 because 50px is just enough for the .inside div's width and height not to fall out of screen. */ 
 
    /* make it like your image */ 
 
    background-color: blue; 
 
    overflow: auto; 
 
}

<div class="full"> 
 
    <div class="inside"></div> 
 
</div>

出典

2016-09-25 12:29:07

内部ブロックにテキストを追加しますか？スクロールバーが表示されると、コードスニペットがより明確になります。 –

コードを使用するには、lorem ipsumテキストを削除する必要があるので、私はしないと思います。しかし、それが重要であれば私の答えを編集することは自由です。 –

<div class="main" style="background-color:red; height:100vh; float:left; width:100%;> 

    <div class="wrapper" style="width:1170px;margin:0 auto"> 
    <div class="main-text" style="float:left; width:100%; background-color:blue;"> 

</div> 

<div> 

</div>

出典

2016-09-24 07:45:30

ブートストラップをボディ高にスクロール可能なdiv 100％

答えて

関連する問題