CSS Высота в процентах после заполнения не правильно

Question

У меня есть страница с двумя рядами, которые должны быть текучими и на 100% большими и широкими и располагать ряды абсолютно.

Вот код:

<div id="wrapper"> 
    <div class="toprow"> 
     <p>Top</p> 
    </div> 
    <div class="bottomrow"> 
     <div class="inner"> 
      <p>Bottom</p> 
     </div>  
    </div> 
</div> 

.toprow { 
    position: absolute; 
    top: 0; 
    bottom: 45%; 
    width: 100%; 
    background: green; 
} 
.bottomrow { 
    position: absolute; 
    top: 55%; 
    bottom: 0; 
    width: 100%; 
    background: red; 
} 

.inner{ 
    width: 98%; 
    height: 95%; 
    padding: 1%; 
    background: #00f; 
} 

.inner p{ 
    background: white; 
} 

На внутренней обертке второго ряда, я добавил отступ 1%. Поэтому, если есть одна процентная прокладка с каждой стороны, теперь мне нужно, чтобы ширина div внутри обертки составляла 98%. Логический.

Почему это не работает на высоте? Если вы посмотрите на мой jsfiddle ниже, вы увидите, что высота должна быть установлена ​​чуть более 95%, чтобы соответствовать оболочке, даже если на верхней и нижней части есть только 1% отступов.

https://jsfiddle.net/d86o8L02/1/

Answer 1

Установите HTML и запас тела до нуля, а затем изменить бокс-модель для box-sizing:border-box включать прокладку в проклейки:

https://jsfiddle.net/d86o8L02/2/

html, body { 
 
    margin:0; /* < remove default margins */ 
 
} 
 
.toprow { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 45%; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.bottomrow { 
 
    position: absolute; 
 
    top: 55%; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background: red; 
 
} 
 
.inner{ 
 
    width: 100%; /* < make 100% */ 
 
    height: 100%; /* < make 100% */ 
 
    padding: 1%; 
 
    background: #00f; 
 
    box-sizing: border-box; /* < change box model */ 
 
} 
 
.inner p { 
 
    background: white; 
 
}

<div id="wrapper"> 
 
    <div class="toprow"> 
 
     <p>Top</p> 
 
    </div> 
 
    <div class="bottomrow"> 
 
     <div class="inner"> 
 
      <p>Bottom</p> 
 
     </div>  
 
    </div> 
 
</div>

Answer 2

Вы можете использовать свойство коробчатых размеров.

-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;