html - Div 为父级的 100%

Question

我的主要内容 div 不适合我的包装器的高度。

我将 html、body 和 wrapper 的高度设置为 100%。

我的主要内容的高度也设置为 100%，但它似乎在包装底部添加了更多内容，导致它位于主体外部!

CSS:

html,body {
  margin:0;
  font-family:asap!important;
  background-color:#FFD400!important;
  height:100%;
  min-height:100%;
}


#wrapper {
  width:100%;
  min-height:100%;
  position:relative;
  height:auto;
  overflow-x:hidden
}

.contentwrap {
  background:lightblue;
  position:relative;
  padding-top:50px;
 height: 100%;
}

HTML:

<div id="wrapper">
   <div class="headerwrap">
      <div id="logo">
        <a href="#"><img src=#"></a>
      </div>
    <div class="headercontact">
        <img src="#">
    </div>
    </div>

    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Manage My Website</a>
            <ul class="sub-menu">
                <li><a href="#">Make Website Changes</a></li>
                <li><a href="#">Renew My Website Package</a></li>
            </ul>
        </li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">My Details</a></li>
        <li><a href="#">Help Center</a></li>
      </ul>
    </div>

    <div class="contentwrap">
          <div class="row clearfix">
             <div class="col-md-6 column">
                <div class="textcontainer">
                   <p class="maintext">Hello Alicia,</p>
                   <p class="maintext smalltext whitetext">Welcome to Your Account!</p> 
                </div>
              </div>

               <div class="col-md-6 column">
                  <div class="circle circle-solid">
                    <div class="circle-inner">
                        <div class="score-text">
                            home page marketing
                        </div>
                    </div>
                </div>
              </div>
          </div>
     </div>

    <div class="folk">
        <img src="/Images/ST-Folk-Dec.png">
    </div>

</div>

有什么想法吗？

Answer 1

用于 height 100% position:absolute 样式

<div style="border:1px red solid; height:100%; position:absolute; width:100%">
    Height 100% width 100%
</div>