我怎樣才能得到汽車高度的鋰標籤響應菜單

Question

我有一個問題與CSS，我有100％的高度和6xli的UL，我想修復李覆蓋屏幕所有100％寬度（100/6）％的高度，使這個響應..

.reset { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.iphone_screen { 
 
    width: 375px; 
 
    height: 627px; 
 
    background-color: #ccc; 
 
} 
 
.iphone_screen>ul { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #bbb; 
 
} 
 
.iphone_screen>ul>li { 
 
    width: 100%; 
 
    height: 15%; /* (100/6) */ 
 
    list-style: none; 
 
}

<div class="iphone_screen reset"> 
 
    <ul class="reset"> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    </ul> 
 
</div>

Answer 1

使用這個代替height: calc(100%/6);

見琴：https://jsfiddle.net/5pre17op/

.iphone_screen>ul>li { 
    width: 100%; 
    height: calc(100%/6); 
    /* (100/6) */ 
    list-style: none; 
} 

Answer 2

試試這個：

.reset { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.iphone_screen { 
 
    width: 375px; 
 
    height: 627px; 
 
    background-color: #ccc; 
 
} 
 
.iphone_screen>ul { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #bbb; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.iphone_screen>ul>li { 
 
    width: calc(100%/6); 
 
    height: 100%; 
 
    float: left; 
 
    position: relative; 
 
    list-style-type: none; 
 
}

<div class="iphone_screen reset"> 
 
    <ul class="reset"> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    <li>li menu</li> 
 
    </ul> 
 
</div>