Question

设置为div的div有问题：高度：计算（100％ - 100px）;

这在普通屏幕上运行正常。但是当我将视口的大小更改为＆lt; 1000px，我希望高度只有100％。但是设置：身高：100％;

似乎没有完全重置calc（）。

有谁知道如何解决这个问题？

Answer 1

你能展示你的代码吗？

使用@media查询，您可以执行此操作

试试这个：

＆＃13;

#menu { 
    background-color: rgba(44,47,49,1.0); 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    width: 320px; 
    color: rgba(255,255,255,1.0); 
    height: calc(100% - 245px); 
    padding: 30px; 
    margin-top: 115px; 
    z-index: 99999 !important;
}

@media (max-width: 1000px) {
    #menu { 
        height: 100%; 
    }
}

＆＃13;

<div id="menu">
</div>

＆＃13;

Answer 2

这是普通菜单div的css：

#menu { background-color: rgba(44,47,49,1.0); position: fixed; top: 0px; right: 0px; width: 320px; color: rgba(255,255,255,1.0); height: calc(100% - 245px); height: -o-calc(100% - 245px); /* opera height: -webkit-calc(100% - 245px); /* google, safari height: -moz-calc(100% - 245px); /* firefox */ height: 100%; padding: 30px; margin-top: 115px; z-index: 99999 !important;}

然后对于较小的设备（现在我将高度设置为80px而不是100％：

@media screen and (max-width: 1000px) { #menu { padding: 0px; bottom: 0px; right: 0px; top: inherit; width: 100%; height: 80px; clear: both; margin-top: inherit;} }

和html：

<div id="menu"> <div class="title">Menu</div> <ul> <li class="button code"><a href="#">Code</a></li> <li class="button camera"><a href="#">Camera</a></li> <li class="button people"><a href="#">Participants</a></li> <li class="button more"> <input type="checkbox" id="toggle-more"> <label for="toggle-more">More</label> <div class="sub"> <ul> <li class="button bars"><a href="#">Leaderboard</a></li> <li class="button chat"><a href="#">Chat</a></li> </ul> </div> </li> <li class="button close selected hidden">Close</li> <ul> </div>

你还需要更多东西吗？

如何重置高度：calc（）

2 个答案: