响应式滚动div高度

我有一个固定的页脚。我有一个相对的标题。在这些容器之间有被设置为溢出的内容：y：auto。这意味着滚动条应仅在此div容器中显示。我有这个内容div的容器。此div的高度设置为像素，因为使用百分比时，它会自动变为100％，滚动条不可见。无需改变屏幕的高度，它在100％看起来很完美。但是，如果用户要更改屏幕的高度 - 用户无法看到div中的所有内容，因为固定页脚正在覆盖该页面。当用户缩小时，页脚和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不准确地显示我的问题。滚动条应该只显示在内容中而不是标题中。现在是这样。

感谢

来源

2016-08-02 userlkjsflkdsvm

.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

来源

2016-08-02 04:57:19

它完美的的jsfiddle，但是我的本地机器上也没有表现出任何迹象表明，高度：理论值（100vh-100像素）的工作，有什么想法？ – userlkjsflkdsvm

@userlkjsflkdsvm您的css可能会覆盖我的风格 –

也许..问题是那些与我给出的样式完全相同的最外层。 – userlkjsflkdsvm

.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%; 
}

这是你想要的吗？

来源

2016-08-02 04:48:24

响应式滚动div高度

回答

相关问题