css高度等于屏幕高度,求解

盲木_木然
  • 550

clipboard.png
就像百度右上角更多产品一样,高度和屏幕高度相等,怎么解决,求大神

回复
阅读 38.4k
6 个回答
chosan
  • 439
✓ 已被采纳

它只是用js动态设置了min-height属性给style,我屏幕最大化的时候min-height:974,缩小浏览器高度,min-height:814,而这个高度就是我浏览器视口的高度,然后让它display:none,鼠标移上去就display:block,如果在pc端回答,我可以截图给你,无奈现在我这边的SegmentFault抽风,页面加载出问题,点了回答加载不出来富文本编辑器,所以只有手机回答了


补充

现在PC端可以了:
鼠标移上去之后(浏览器最大化):
clipboard.png

浏览器缩小之后:

clipboard.png

其实就是通过js拿到视口高度,设置给了该元素的style,内联属性覆盖了css而已,不过这是它的做法,我觉得没必要这么麻烦,它或许还有其它考虑。

$(window).on("load resize",function(){
        var h=window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;
        $("sidebar").css("height",h);
    });

absolute是一种方法,试试100vh?

<div style="position: absolute;width: 0;height: 100%;top: 0;right: 0;z-index: 9">

<div style="position:fixed; width: 60px;height: 100%; top: 0; right:0;background: #ddd;"></div>

</div>
这样就ok啦

绝对定位,上,下,右的值为0,再给一个width即可

丶小猴子偷桃子
  • 279

获取窗口的高度$(window).height();在把获取到的窗口高度,赋值给你要显示的元素。

宣传栏