レスポンシブスクロールdivの高さ

Question

私はフッターが固定されています。私は相対的なヘッダーを持っています。これらのコンテナの間には、overflow-y：autoに設定されたコンテンツがあります。スクロールバーがこのdivコンテナにのみ表示されるはずです。このコンテンツの周りにコンテナがあります。このdivの高さは、パーセントを使用すると自動的に100％になり、スクロールバーが表示されないため、ピクセルに設定されます。画面の高さを変えずに100％で完璧に見えます。しかし、ユーザーが画面の高さを変更した場合、固定フッターがこれをカバーしているため、ユーザーはdiv内のすべてのコンテンツを見ることができません。ユーザーがズームアウトすると、フッターとdivの間に空白があります。ユーザーがズームアウトしたときに空白がなく、ユーザーが画面の高さを変更すると、ユーザーはすべてのコンテンツを見ることができるようにしたいと思います。

HTML

<div class="top-container"> 
</div> 
<div class="container"> 
<ul> 
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
</ul> 
</div> 
<footer> 

</footer> 

CSS

.top-container { 
position: relative; 
z-index: 6; 
background: #fff; 
padding: 40px 40px 0; 
bottom: 0; 
width: 100% 
} 
.container { 
padding: 10px 0; 
margin: 0 .6%; 
} 
ul { 
padding-top: 2px; 
height: 437px; 
overflow-y: auto; 
overflox-x: hidden; 
} 
footer{ 
background: #fff; 
padding: 20px 50px; 
overflow: hidden; 
position: fixed; 
z-index: 5; 
left: 0; 
bottom: 0; 
width: 100%; 
} 

JSFIddleこのJSfiddleは正確に私の問題は表示されません。スクロールバーはヘッダーではなくコンテンツにのみ表示する必要があります。それが今のところなのです。

おかげ

Answer 1

.top-container { 
 
    position: relative; 
 
    z-index: 6; 
 
    background: #fff; 
 
    padding: 40px 40px 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    max-height: 60px; 
 
    background: green; 
 
} 
 
.container { 
 
    padding: 10px 0; 
 
    margin: 0 .6%; 
 
    overflow-y: scroll; 
 
    height: calc(100vh - 100px); 
 
    background: blue; 
 
} 
 
ul { 
 
    padding-top: 2px; 
 
    height: 437px; 
 
    overflow-y: auto; 
 
    overflox-x: hidden; 
 
} 
 
footer{ 
 
    background: #fff; 
 
    padding: 20px 50px; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    z-index: 5; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
body{ 
 
    max-height: 90vh; 
 
    } 
 
footer{ 
 
    background: red; 
 
    max-height: 40px; 
 
}

<div class="top-container"> 
 

 
</div> 
 
<div class="container"> 
 
    <ul> 
 
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
 
    </ul> 
 
</div> 
 
<footer> 
 

 
</footer>

それはjsFiddleで完璧に動作更新jsFiddle

Answer 2

.top-container { 
position: relative; 
z-index: 6; 
background: #fff; 
padding: 40px 40px 0; 
bottom: 0; 
width: 100% 
} 
.container { 
padding: 10px 0; 
margin: 0 .6%; 
} 
ul { 
padding-top: 2px; 
//height: 437px; 
overflow-y: auto; 
overflox-x: hidden; 
} 
footer{ 
background: #fff; 
padding: 20px 50px; 
overflow: hidden; 
z-index: 5; 
width: 100%; 
} 

はこれが何をしたいですか？ここで