Родителя не принимает деление с высотой 100% контейнер DIV

Question

Я получил 4 вложенных div «s именование: wrap>container>parentBox>childBox.

Контейнер div 100% минус 70px (70px - высота нижнего колонтитула (60) плюс 10px = 70px).

Я хочу, чтобы parentBox оставил высоту (100%) контейнер div ушел. И я хочу, чтобы childBox взял 100% от родительского бокса div, минус header (также внутри parentBox, содержащего слово «тест»), которое составляет 40 пикселей;

Но в результате я получаю то, что parentBox и childBox занимают минимальную высоту высоты стола.

Я столкнулся с несколькими сообщениями об этом здесь, но никто из них не помог мне в этом вопросе.

Почему это не работает?

См jsFiddle

EDIT: код, который я считаю уместным:

#wrap { 
     height: 100%; 
     /* Negative indent footer by its height */ 
     margin: 0 auto -60px; 
     /* Pad bottom by footer height */ 
     padding: 0 0 60px 0px; 
    } 

.parentbox { 
    width: 100%; 
    padding: 0px 3px 5px 5px; 
    margin-bottom: 0px; 
    overflow: hidden; 
    min-height:100%; 
    border:1px solid #000; 
} 

.childbox { 
    overflow: auto; 
    overflow-x: hidden; 
    min-height:100%; 
    border:1px solid #000; 
} 

Answer 1

похоже, что вы ищете липкий нижний колонтитул. Вы можете найти то, что ищете, используя свойства экрана, используемые <table>, и установите их в <div>. Нижний колонтитул, тогда должен быть и ребенок. Идея такова: полноэкранный стол с тремя рядами, а средний - с максимально возможной площадью. http://jsfiddle.net/e62Wu/28/

<div id="wrap"> 
    <div class="navbar navbar-default"> 
     <div class="navbar-header"> 
      <div class="navbar-text ">HEADER</div> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="parentbox"> 
      <div class="header"> 
       <h3> 
      <span class="glyphicon glyphicon-user"></span><span style="margin-left:5px;">test</span> 
     </h3> 

      </div> 
      <!-- header div end --> 
      <div class="childbox"> 
       <table class="table table-hover"> 
        <tr> 
         <td>Jill</td> 
         <td>Smith</td> 
         <td>50</td> 
        </tr> 
        <tr> 
         <td>Eve</td> 
         <td>Jackson</td> 
         <td>94</td> 
        </tr> 
        <tr> 
         <td>Jill</td> 
         <td>Smith</td> 
         <td>50</td> 
        </tr> 
        <tr> 
         <td>Eve</td> 
         <td>Jackson</td> 
         <td>94</td> 
        </tr> 
       </table> 
      </div> 
      <!-- childbox-content div end --> 
     </div> 
     <!-- parentbox div end --> 
    </div> 
    <!-- container div end --> 
    <div id="footer"><!-- back inside --> 
     <div class="container"> 
      <p class="text-muted credit">FOOTER</p> 
     </div> 
    </div> 
</div> 
<!-- wrap div end --> 

И здесь поясню CSS, необходимые для отправки свойств макета таблицы: Это будет использовать типичное поведение элементов таблицы. Если вам не нравится, отобразите: flex; вместо отображения: table; также может быть использован, но это еще слишком мало в CSS, чтобы быть прочным. IE8-10 вообще не поймет его. .

html, body, #wrap { 
    height:100%; 
    width:100%; 
    margin:0; 
    /* to include borders and padding inside size calculation */ 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
} 
#wrap { 
    display:table; 
} 
.navbar, #wrap > .container, #footer { 
    display:table-row; 
    background:lime; 
} 
#wrap > .container { 
    height:100%; 
    background:turquoise; 
} 

Для этого требуется как минимум IE8.

У вас есть вопрос:% высот наследует значения только от height в прямом родительском CSS. min-height не имеет значения для height или даже min-height.

Answer 2

Оба .parentBox и .childBox только декларацию мин высоты, и от того, что я понимаю, что будет работать только один уровень глубокого значения .childBox никогда не узнает, какой фактический размер 100%.

Answer 3

Я не уверен, что я понимаю ваш вопрос, но попробуйте удалить height: 100%; из #wrap > .container.