堆栈内存溢出
  繁体   English   中英

使用％作为网格系统的高度

[英]Using % as height for grid system

 原文  2015-07-28 16:25:10  7   2    javascript/ jquery/ html/ css

问题描述

即时消息，我在我创建的网站上遇到了很大的问题，我无法以％的高度将所有内容均等化。 取而代之的是我使用px ，但我觉得它不够用。 我尝试将所有项目更改为%但div折叠为包含元素，并且实际上不使用给定空间的％。 我已将页面分为两部分，每部分有几行，我无法仅以px为单位设置行高（它可以工作）。 有任何想法吗？ 我将在此处和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>

与该问题有关的css部分： 

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
}

我正在使用Skeleton网格系统，并进行了一些修改。 你们可以看到我尝试在某些项目中添加高度％，以使其正常工作，但我看不出有什么问题。 有人可以指出我正确的方向吗？ 其余的在JSFIDDLE上。

http://jsfiddle.net/qbj0r5bk/

这是全屏结果： https : //jsfiddle.net/qbj0r5bk/embedded/result/

2 个解决方案

解决方案1
 0 已采纳  2015-07-28 17:19:26

让我们举个例子。 让我们做一个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/

解决方案2
 0  2015-07-28 17:19:44

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

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将jQuery匹配高度与CSS自适应网格配合使用 在没有JS的情况下将Bootstrap Grid用于Tile系统 使用add_widget方法时，Gridster网格高度不正确 使用offcanvas时在xs网格中的自举行高度 如何使用Angular js设置同步融合网格的最小高度？ 使用rowHeight的ui-grid行高：&#39;auto&#39; 如何使用Ag-Grid动态增加行高？ Bootstrap 3网格系统-“单元”的高度可扩展，但会将整个下一行向下移动 修改网格高度/宽度 引导网格中的可变高度
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM