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:absoulte样式

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

Answer 2

html / body上的100％表示100％的屏幕。所以实际上你的身体的静态高度等于你的屏幕高度。

摆脱html和身体上的height:100%

Answer 3

更改

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

到

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

Answer 4

在我的代码分开之后，我找到了一个解决方案，并认为我会发布以防其他人有这个问题！

由于我的包装器中有两个div，标题div和内容div，我需要在包装器中考虑它们的两个高度。

如果你看到我上面的代码，我将导航移动到headerwrap并设置高度为23％，然后我在内容包装器上设置了77％的高度。

您可能需要为两者添加最小高度以停止在较小屏幕上剪切的任何内容。

Div为父母的100％

4 个答案: