Размер блока не работает на ли с встроенным блоком

Я не знаю почему, но только в моем нижнем колонтитуле с li в inline-block и border-top в активном классе мой box-sizing: border-box не работает.

Когда класс активен, есть граница сверху, и мы видим зазор внизу.

Вот пример:

* { box-sizing: border-box }
#header{
 position:absolute;
 top:0;
 right:0;
 left:0;
 background-color:#333c45;
 height:60px;
 line-height:60px; 
}
#corp{
 position:absolute;
 top:60px;
 bottom:60px;
 right:0;
 left:0;
 background-color:#CDCDCD;
}
#footer{
 position:absolute;
 bottom:0;
 right:0;
 left:0;
 background-color:#333c45;
 height:60px;
 line-height:60px;
  
}
#footer li{
 display:inline-block;
 width:45%;
}
ul{
 margin:0;
 padding:0;
}
.active{
 color:#05FF01;
 border-top:2px solid #05FF01;
}
<html>
<head>
</head>
<body>
<div id="header">
test 
</div>
<div id="corp">
</div>
<div id="footer">
<ul>
<li class="active">boutton 1</li>
<li>boutton 2</li>
</ul>
</div>
</body>
</html>

Как я могу решить эту проблему?

Спасибо!

Источник

2 ответа

Решение

Добавлять overflow:hidden к телу. Это предотвратит любую вертикальную полосу прокрутки.

Также, как примечание, IMO делает макет с каждым элементом в position:absolute это ужасная идея, и вы быстро получите головную боль.

* {
  box-sizing: border-box
}

body {
  overflow: hidden;
}

#header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #333c45;
  height: 60px;
  line-height: 60px;
}

#corp {
  position: absolute;
  top: 60px;
  bottom: 60px;
  right: 0;
  left: 0;
  background-color: #CDCDCD;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #333c45;
  height: 60px;
  line-height: 60px;
}

#footer li {
  display: inline-block;
  width: 45%;
}

ul {
  margin: 0;
  padding: 0;
}

.active {
  color: #05FF01;
  border-top: 2px solid #05FF01;
}
<html>

<head>
</head>

<body>
  <div id="header">
    test
  </div>
  <div id="corp">
  </div>
  <div id="footer">
    <ul>
      <li class="active">boutton 1</li>
      <li>boutton 2</li>
    </ul>
  </div>
</body>

</html>

Источник

box-sizing определяет, как указанные значения для свойств высоты и ширины интерпретируются, но ваш li элементы не имеют свойства высоты. Их высота - это просто сумма высоты верхней границы и высоты поля содержимого, которая автоматически вычисляется из высоты строки.

Источник
Другие вопросы по тегам