Using % as height for grid system

Question

Guys im having big problems with a site i created i can't get heights in % to make everything equal. Instead i used px and i feel like it is inadequate. I tried changing all the items to % but the div collapse to the containing elements and don't actually use the % of space given. I have sectioned my page into 2 part with a couple of rows in each and i can't set the row height in % only in px it works. any ideas? i will upload the parts of the script here and the rest of Jfiddle.

HTML:

<div class="table-container">
<div class="table-block footer-push"><!-- Primary Page Layout
           –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row header">
<div class="one columns"><input class="bbar" placeholder="search"></div>
<div class="eleven columns person"><span><a>Rajat Sharma</a><i class="fa fa-angle-down fa-fw op"></i></span> <img class="loginimg" src="logout.png"></div>
</div>
<div class="row">
<div class="twelve column">
<div class="pbox"><img alt="Paragon" class="pimg" src="paragon_sqaure.png"></div>
</div>
</div>
<div class="row">
<div class="ten columns PP"><a>Paragon Portal</a></div>
<div class="two columns PP"><input class="more-button" type="button" value="MORE..."></div>
</div>
</div>
<!-- end primary div.container --></div>
<!-- end primary div.table-block -->
<div class="table-block cont">
<div class="container">
<footer class="twelve columns" id="footer">
<div class="four columns steps">
<div class="active-cases"><a>Active Cases</a></div>
<div class="newcomments"><a>New Comments</a></div>
<div class="active-open-cases"><a>Active Open Cases</a></div>
<div class="newcomments2"><a>New Comments</a></div>
<div class="stats">
<div class="guages">
<div class="c100 p12 small dark orange"><span>90</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark green"><span>20</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p12 small dark"><span>12%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
</div>
<div class="four columns jonarand">
<div class="box1">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20jonar%20logo.png">
<figcaption>Jonar & You</figcaption>
</figure>
</div>
<div class="box2">
<figure><img src="http://www.npnrmanagement.com/Portal/img/person%20(1).png">
<figcaption>Customer & You</figcaption>
</figure>
</div>
<div class="box3">
<figure><img src="http://www.npnrmanagement.com/Portal/img/Community%20Icon%20(1).png">
<figcaption>Paragon Community</figcaption>
</figure>
</div>
<div class="box4">
<figure><img src="http://www.npnrmanagement.com/Portal/img/White%20Paragon%20Logo.png">
<figcaption>Paragon Software</figcaption>
</figure>
</div>
</div>
<div class="four columns menuitem">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>
</footer>
</div>
<!-- end footer div.container -->
<!-- end footer div.table-block --></div>
</div>

the part of the css that pertains to this problem:

html, body {
      height: 100%
    }

    .table-container {
      display: table;
      height: 100%;
      width: 100%;
    }

    .table-block {
      display: table-row;
      height: 1px;
    }

    .footer-push {
      height: 50%;
    }

    #footer {
      /* Placeholder footer styles */
    }

.cont { height: 50%;}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 33.33333333333333%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}
/* Paragon Partner Portal Styles
-------------------------------------------------- */
.bbar {
    opacity:.81;
    font-family:'Roboto',sans-serif;
    font-size:16px;
    font-style:italic;
    color:#FFF;
    display:inline-block;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
/*padding: 10px 20px;*/
    padding-left:5px;
    padding-right:5px;
    height:21px;
    width:115px;
    text-align:center;
    border:0 solid rgba(0,0,0,0.22);
    -webkit-border-radius:20px;
    border-radius:12px;
    -o-text-overflow:clip;
    text-overflow:clip;
    background:rgba(255,255,255,0.13);
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    margin-left:20px
}

.person {
    text-align:right;
    height:inherit
}

.person a {
    opacity:.41;
    font-family:'Roboto',sans-serif;
    font-size:16px;
    color:#FFF;
    font-weight:500;
    text-transform:uppercase
}

.person span {
    margin-right:15px
}

.loginimg {
    margin-bottom:-6px;
    margin-right:15px
}

.pbox {
    background:rgba(255,255,255,0.20);
    box-shadow:2px 3px 4px 0 rgba(12,12,12,0.05);
    margin:0 auto;
    display:inline-block;
    border-radius:50%;
    height:110px;
    width:110px;
    text-align:center
}

.pimg {
    padding-top:21px;
    width:70px;
    height:60px
}

.PP {
/*margin-top: 133px;*/
    text-align:left;
    height:50px
}

.PP a {
    opacity:.64;
    font-family:'Roboto' sans-serif;
    font-size:32px;
    color:#FFF;
    margin-left:20px
}

.more-button {
    display:inline-block;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:17px;
    cursor:pointer;
    padding:4px 14px;
    border:none;
    -webkit-border-radius:21px;
    border-radius:21px;
    color:rgba(255,255,255,0.9);
    -o-text-overflow:clip;
    text-overflow:clip;
    background:#000;
    font-family:'Roboto' sans-serif;
    font-size:16px;
    color:#FFF;
    margin-top:15px;
    margin-right:15px;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1);
    transition:all 200ms cubic-bezier(0.42,0,0.58,1)
}

.steps {
    font-size:20px;
    font-weight:500;
    color:#fff
}

.active-cases {
    background:rgba(0,0,0,.50);
    height:64px;
    overflow:hidden;
    border:none;
    text-align:center;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}

.newcomments {
    background:rgba(0,0,0,.30);
    height:64px;
    overflow:hidden;
    border:none;
    text-align:center;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}

.active-open-cases {
    background:rgba(0,0,0,.50);
    height:64px;
    overflow:hidden;
    border:none;
    text-align:center;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}

.newcomments2 {
    background:rgba(0,0,0,.30);
    height:64px;
    overflow:hidden;
    border:none;
    text-align:center;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}

.stats {
    background:rgba(51,51,51,0.28);
    height:172px;
    font-size:10px
}

.guages {
    padding-left:95px;
    padding-top:52px
}

.jonarand {
    height:426px;
    margin-left:0px;
    border-left: 3px solid rgba(0,0,0,0);
    border-right: 3px solid rgba(0,0,0,0);
}

.jonarand img {
      display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 41px;
}

.jonarand figcaption {
    text-align: center;
    padding-top: 10px;
    font-size: 20px;
    color: #FFF;
    opacity: .60;
}
.box1 {
    height:49.25%;
    width:49.25%;
    background:rgba(0,0,0,0.59);
    float:left;
    margin-right:2px;
    margin-bottom:2px;
}

.box2 {
    height:49.25%;
    width:49.75%;
    background:rgba(0,0,0,0.59);
    float:left;
    margin-bottom:2px;
}

.box3 {
    height:50.75%;
    width:49.25%;
    background:rgba(0,0,0,0.59);
    float:left;
    margin-right:2px;   
}

.box4 {
    height:50.75%;
    width:49.75%;
    background:rgba(0,0,0,0.59);
    float:left
}

.menuitem {
    height:418px;
    margin-left:0;
    text-align: center;
    font-size:20px;
    font-weight:500;
    color:#fff  
}

.menuitem a:link {
    text-decoration: none;
    color:#FFF;
}

.item1 {
    height:16%;
    margin-bottom:2px;
    background:rgba(0,0,0,0.59);
}

.item2 {
    height:16%;
    margin-bottom:2px;
    background:rgba(0,0,0,0.59);
}

.item3 {
    height:16%;
    margin-bottom:2px;
    background:rgba(0,0,0,0.59);
}

.item4 {
    height:16%;
    margin-bottom:2px;
    background:rgba(0,0,0,0.59);
}

.item5 {
    height:16%;
    margin-bottom:2px;
    background:rgba(0,0,0,0.59);
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}

.item6 {
    height:20%;
    background:rgba(0,0,0,0.59);    
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -moz-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    -o-transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms;
    transition:all 200ms cubic-bezier(0.42,0,0.58,1) 10ms
}

I am using Skeleton grid system and made some modifications. As you guys can see i tried adding height % to some items to try to make it work but i don't see whats wrong. Can someone point me to the right direction? the rest is on JSFIDDLE.

http://jsfiddle.net/qbj0r5bk/

here is the fullscreen result: https://jsfiddle.net/qbj0r5bk/embedded/result/

Answer 1

让我们举个例子。让我们div并将其设置为height:30%。

<强> HTML

<div id="container1"></div>

<强> CSS

#container1 {
    background-color:#f00;
    width:30%;
    height:30%;
}

那不起作用，你最终会得到一个空白页面。原因是，虽然div是您要使用的唯一组件，但该页面还包含其他组件html和body。当您将div的高度设置为30％时，您实际告诉的是将高度设置为body的高度的30％，即html的高度的100％ 。但是，html默认情况下没有任何高度，它与其内容一样高，并且您最初没有任何内容。让我们对你的CSS进行一些小改动。

新CSS

#container1 {
    background-color:#f00;
    width:30%;
    height:30%;
}

html, body {
    height:100%;
}

试试这个小提琴：http://jsfiddle.net/r628n48L/1/

Answer 2

我认为你不应该将html和body高度设置为100％，因为页面的高度与屏幕高度相同，而且其中的所有内容都会溢出。

如果您的意思是将高度设置为％而不是固定单位来创建响应屏幕的元素，只需将其写入vh即可。例如，height: 50vh或视口高度的50％。试试吧。

然后删除html, body {height: 100%}。