Div to be 100% of parent

Question

My main content div does not fit the height of my wrapper.

I have the html, body and wrapper set to a height of 100%.

I also have the height of my main content to 100% however it seems to add more to the bottom of the wrapper causing it to sit outside of the body!

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

The 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>

Any Ideas?

score 0 · Answer 1 · answered Oct 14 '14 at 14:55

0

Use for height 100% position:absoulte style

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

answered Oct 14 '14 at 14:55

Harutyun Abgaryan

2,013
1
12
15

Thanks, im guessing this is to be added to the contentwrap - It still has the same issues of making the wrapper spill out of the body? – Alicia C Oct 14 '14 at 15:14
yes try body {border:1px red solid; height:100%; position:absolute; width:100%; margin:0px; padding:0px;} – Harutyun Abgaryan Oct 14 '14 at 15:16
Still no joy - same issue of wrapper sticking out of body :( Only thing that seems to fix it is adding overflow:hidden to the body but do not want to do that for obvious reasons. – Alicia C Oct 14 '14 at 15:28

score 0 · Answer 2 · answered Oct 14 '14 at 14:56

0

100% on the html/body means 100% of your screen. So actually your body has a static height which is equal to your screen height.

Get rid of the height:100% on both your html and your body

answered Oct 14 '14 at 14:56

Goos van den Bekerom

1,475
3
20
32

alot of forums online say this is a must in order for it to work? – Alicia C Oct 14 '14 at 15:13
It still has the same issues of making the wrapper spill out of the body? – Alicia C Oct 14 '14 at 15:14

score 0 · Answer 3 · answered Oct 14 '14 at 14:57

0

change

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

to

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

answered Oct 14 '14 at 14:57

Gildas.Tambo

22,173
7
50
78

Thanks but still having the same problem with that - wrapper sticking out of body – Alicia C Oct 14 '14 at 15:30

score 0 · Accepted Answer · answered Oct 14 '14 at 19:02

After pulling my code apart i found a solution and thought i would post in case someone else has this issue!

As I had two divs within my wrapper, the header div and content div, i needed to account for both of their heights within the wrapper.

If you see my code above i moved the navigation into the headerwrap and set a height of 23%, i then set a height of 77% on the content wrapper.

You may want to add a min-height to both to stop any content being cut on smaller screens.

Div to be 100% of parent

4 Answers4