CSS полная высота для детских контейнеров?

Question

Мне нужно сделать 2 дочерних контейнера «слева» и «справа», чтобы быть на 100% высотой, поскольку родительский контейнер «» уже есть - как это возможно? И как я могу управлять надлежащим горизонтально расположенным контейнером «hexCont»?

CSS:

<style type="text/css"> 
html, body { 
margin: 0px; 
padding: 0px; 
height: 100%; 
} 
#makkq { 
min-height: 100%; 
height: auto !important; 
background-color: #ECE2C6; 
height: 100%; 
} 
#makkq .left { 
display:table; 
float:left; 
min-width:290px; 
width:50%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto; 
text-align:center; 
background-color: #fff; 
outline:1px solid #C9C9C9; 
} 
#makkq .right { 
display:table; 
float:right; 
min-width:289px; 
width:50%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto; 
text-align:center; 
background-color: #f8f8f8; 
outline:1px solid #C9C9C9; 
} 
#makkq .inner { 
display: table-cell; 
vertical-align: middle; 
padding:20px; 
} 
#makkq .innerTitleLft, #makkq .innerTitleRght { 
width:100%; 
font-size:24px; 
font-weight:300; 
color: #494949; 
padding:15px 0; 
} 
#makkq .decisionLabel { 
width:60px; 
height:22px; 
background-color: #494949; 
color:#fff; 
position:absolute; 
text-align:center; 
left:470px; 
margin-top:90px; 
padding-top:3px; 
} 
#makkq .hexContOuter { 
position: relative; 
} 
#makkq .hexCont { 
position: absolute; 
margin-top:80px; 
left:50%; 
transform: translate(-50%, -50%); 
text-align:center; 
} 
#makkq .hexagon { 
color:white; 
position: relative; 
width: 60px; 
height: 22px; 
background-color: #494949; 
margin: 50px; 
} 
#makkq .hexagon:before, .hexagon:after { 
content:" "; 
position: absolute; 
border-top: 11px solid transparent; 
border-bottom: 11px solid transparent; 
} 
#makkq .hexagon:before { 
left: 100%; 
border-left: 11px solid #494949; 
} 
#makkq .hexagon:after { 
right: 100%; 
border-right: 11px solid #494949; 
} 
#makkq .hexagonTxt { 
font-size:12px; 
display:inline-block; 
padding-top:1px; 
} 
#makkq .innerTxt { 
width:100%; 
font-size:12px; 
line-height:16px !important; 
font-weight:400; 
color: #494949; 
margin-bottom:35px; 
} 
</style> 

HTML:

<div id="makkq"> 
<div class="hexContOuter"> 
    <div class="hexCont"> 
    <div class="hexagon"> 
    <span class="hexagonTxt">or</span> 
    </div> 
    </div> 
</div> 
<div class="left"> 
<div class="inner"> 
    <div class="innerTitleLft">Lorem Ipsum Left</div> 
    <div class="innerTxt">lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</div> 
</div> 
</div> 
<div class="right"> 
<div class="inner"> 
    <div class="innerTitleRght">Lorem Ipsum Right</span></div> 
    <div class="innerTxt">lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum dolor sit</div> 
</div> 
</div> 
</div> 

Answer 1

Удалить height: auto !important; из вашего контейнера (#makkq), левый (#makkq .left) & правых (#makkq .right) содержания. Кроме того, нет необходимости назначать min-height: 100%;, когда вы установили height: 100%; на элементы.

Обновленный CSS:

#makkq { 
    /* min-height: 100%; 
    height: auto !important; */ 
    background-color: #ECE2C6; 
    height: 100%; 
} 
#makkq .left { 
    display: table; 
    float: left; 
    min-width: 250px; 
    width: 50%; 
    /* min-height: 100%; 
    height: auto !important; */ 
    height: 100%; 
    margin: 0 auto; 
    text-align: center; 
    background-color: #fff; 
    outline: 1px solid #C9C9C9; 
} 
#makkq .right { 
    display: table; 
    float: right; 
    min-width: 250px; 
    width: 50%; 
    /*min-height: 100%; 
    height: auto !important;*/ 
    height: 100%; 
    margin: 0 auto; 
    text-align: center; 
    background-color: #f8f8f8; 
    outline: 1px solid #C9C9C9; 
} 

DEMO