100% высота дивы с центром содержания

Question

Я пытаюсь воссоздать: http://jsfiddle.net/MGRdP/6/

html, body{ 
 
    height:100%; 
 
} 
 

 
.table { 
 
    width: 100%; 
 
    display: table; 
 
    height:100%; 
 
} 
 

 
.cell { 
 
    border: 2px solid black; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    height:100%; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div>

с помощью Аккуратные, но мои дивы не расширяется до 100% от высоты окна просмотра. Используя инспектора, я не могу найти никаких расхождений. Очевидно, что-то здесь.

Может ли кто-то предоставить правильную разметку для аккуратного, что позволяет мне достичь как скрипки?

Answer 1

Если вы хотите две дивы бок о бок (как скрипку), просто сделать каждый один width:50% и float:left

html, body{ 
 
    height:100%; 
 
} 
 

 
.table { 
 
    width: 50%; 
 
    display: table; 
 
    height:100%; 
 
    float:left; 
 
} 
 

 
.cell { 
 
    border: 2px solid black; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    height:100%; 
 
}

<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="cell"> 
 
     <p>Text</p> 
 
    </div> 
 
</div>

Answer 2

.table { 
    width: 50%; 
    display: table; 
    height:100%; 
    float:left; 
} 

это CSS сделать два DIV, чтобы остаться бок боковая сторона. Вы также можете использовать

display:inline-block; 
vertical-align:top; 
width:49%; 

, чтобы бок о бок макета; Для центрирования использования margin:0 auto контента для ребенка и высоты два сделать как вьюпорте пользование-

height:100vh 

jsfiddle link