1. ホーム
  2. 質問と答え
  3. Divの高さとオーバーフローのプロパティを無視する

Divの高さとオーバーフローのプロパティを無視する

2017-06-20 15 views
1

height: calc(100% - 80px)とoverflow: scrollでdivを作成しようとしています。 divはこれらのルールを完全に無視しています。ここに私がしようとしたものである：Divの高さとオーバーフローのプロパティを無視する

.tab-content { 
 
    clear: both; 
 
    height: calc(100% - 80px); 
 
    overflow: auto; 
 
} 
 

 
#tutorial { 
 
    padding: 5%; 
 
}
Tutorial 
 

 
<div id="tutorial" class="tab-content"> 
 
    Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
</div>

私が間違っているとどのように問題を修正することになっているところを私に警告してください。

出典

2017-06-20 Anonymous

+0

'カルク（100％ - 80px）を使用する場合があります;'どのようにスクロールすることができ、オーバーフローがないでしょうか？ –

+0

@DanielHコンテンツがdivをオーバーフローする可能性があります。つまり、スクロールするときです。 –

+0

はすでに動作していますか？ https://jsfiddle.net/dalinhuang/h6Lam4rr/ –

答えて

0

私の推測では、あなたはdivの100% - 80px現在のウィンドウの高さを作りたいだろう。そのためには、100vh

.tab-content { 
 
    clear: both; 
 
    height: calc(100vh - 80px); 
 
    overflow: auto; 
 
    background: aqua; 
 
} 
 

 
#tutorial { 
 
    padding: 5%; 
 
}
Tutorial 
 

 
<div id="tutorial" class="tab-content"> 
 
    Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
</div>

出典

2017-06-20 17:00:37

0

問題は、htmlタグとbodyタグがコンテンツの高さに自動的にサイズ変更されていることです。内部divにスクロールバーを実装する場合は、オーバーフローを確立する必要があります。そうしないとオーバーフローは発生しません。

html, body { 
 
    height: 100%; 
 
} 
 
.tab-content { 
 
    background-color: rgba(0,0,0,0.15); 
 
    clear: both; 
 
    height: 100px; 
 
    height: -webkit-calc(100% - 80px); 
 
    height: -moz-calc(100% - 80px); 
 
    height: calc(100% - 80px); 
 
    overflow: scroll; 
 
} 
 

 
#tutorial { 
 
    padding: 5%; 
 
}
Tutorial 
 

 
<div id="tutorial" class="tab-content"> 
 
    Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
    <br> Tutorial content 
 
</div>

出典

2017-06-20 16:47:54 Ryan

関連する問題

 関連する問題