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

После вытягивать мой код обособленно я нашел решение и думал, я бы разместить в случае, если у кого-то еще есть эта проблема!

Поскольку у меня было два div в моей обертке, div div и content div, мне нужно было учитывать обе их высоты в оболочке.

Если вы видите мой код выше, я переместил навигацию в заголовок и установил высоту 23%, а затем установил высоту 77% на обертку содержимого.

Возможно, вы захотите добавить минимальную высоту для того, чтобы остановить любой контент, разрезанный на меньших экранах.

Answer 2

Используется для height 100%position:absoulte стиля

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

Answer 3

100% на HTML/теле означает 100% ваш экран. Таким образом, на самом деле ваше тело имеет статическую высоту, равную высоте экрана.

Избавиться от height:100% как на вашем HTML, и ваше тело

Answer 4

изменения

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; 
}