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）＆amp;右（#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

CSS完整的儿童容器高度？

1 个答案: