CSS如何使div的最大高度根据浏览器高度变化？

Question

我在网页左边有一个div 里面有个<ul>动态添加内容，内容长度不一定所以当内容充起div时候（高度大于某个值时）时加上了滚动条。本来设置的是如下

<div class="well1" style="padding: 0px 0;max-height: 60%">
    <ul class="nav nav-list" id = "cus_ul" style="overflow-x:hidden; overflow-y:auto; max-height: 400px;">
    </ul>
</div>

但是显示屏 浏览器大小不同时就不行了。
请问大家应该怎么设置呢 比如我希望撑起的最大高度始终距离浏览器底部100px 应该怎么做？
感谢大家。

Answer 1

max-height: calc(100vh - 100px); 或用其他条件计算

Answer 2

div定位fixed，

top:0;
left:0;
bottom: 100px;

ul
width:100%;
height: 100%;
overflow: ...

Answer 3

盒子模型？
padding-bottom: 100px; 试试

Answer 4

可以使用media query

@media only screen and (max-height:768px){
    .well1{
        max-height: 668px;
    }
}

@media only screen and (max-height:1280px){
    .well1{
        max-height: 1180px;
    }
}

@media only screen and (max-height:600px){
    .well1{
        max-height: 500px;
    }
}