Question

我已经创建了一个div而且在div中我已经制作了条形图，我必须将max-height和height设置为100％，但我不知道是什么问题，因为高度100％没有显示。任何人都可以帮我解决这个问题。我想根据值显示要放置的高度，但问题是高度仅显示当我设置高度（以像素为单位）当我将高度设置为100％时它不起作用我想要将高度显示为100 ％有人可以帮我解决这个问题对我来说，非常感谢你的帮助。

这是我的代码 -

＆＃13;

.bar_graph {
    width: 341px;
    height: 258px;
    background-color: #fff;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 20px 12px;
    display: block;
    border: 1px solid #a3a3a3;
}

span.line_gr {
    display: block;
    background-color: #3d4a7b;
    margin: auto;
    width: 24px;
    max-height: 177px;
    margin-left: 0;
    height: 100%;
}
.bars_area {
    width: 238px;
    float: right;
    position: absolute;
    bottom: -8px;
    right: 0;
}

.bars {
    float: left;
    margin: 0 10px;
    margin-top: 20px;
    height: 100%;
    width: 27px;
}

.bars >p {
    font-size: 12px;
    margin: 0;
    line-height: 30px;
    font-weight: bold;
}

.head_graph > h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #000;
}

.bar_main {
    height: 200px;
    position: relative;
}

.bar_main > .line {
    height: 60px;
    width: 100%;
    border-top: 1px solid #ccc;
    line-height: 20px;
    font-size: 12px;
}

＆＃13;

<div class="bar_graph">
  <div class="head_graph"><h2>Heading</h2></div>
  <div class="bar_main">
    <div class="line">3000,000 Mil</div>
    <div class="line">200,000</div>
    <div class="line">100,000</div>
    <div class="line"></div>
    <div class="bars_area">
    <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

由于高度100％未显示
，我不知道是什么问题

高度百分比仅在父元素也具有高度（显式设置或基于其他属性隐式设置，例如具有top 和 {的绝对定位元素时才有效。 {1}}给出）。

你的bottom没有这么高的高度，所以在孩子身上尝试一个百分比的高度也行不通。

Answer 2

正如其他人所说，它不起作用。如果你愿意，我可以建议你采用不同的方法。使用div而不是span。记住我只是根据你的代码建议你另一种方法而不是答案。

.bar_graph {
    width: 341px;
    height: 258px;
    background-color: #fff;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 20px 12px;
    display: block;
    border: 1px solid #a3a3a3;
}
.inner {
  position: absolute;
  width:5px;
  height:200px;
  background: grey;
  bottom:25px;
 
}
span.line_gr {
    display: block;
    background-color: #3d4a7b;
    margin: auto;
    width: 24px;
    max-height: 177px;
    margin-left: 0;
    height: 100%;
}
.bars_area {
    width: 238px;
    float: right;
    position: absolute;
    bottom: -8px;
    right: 0;
}

.bars {
    float: left;
    margin: 0 10px;
    margin-top: 20px;
    height: 100%;
   
    
    overflow: hidden;
}

.bars >p {
    font-size: 12px;
    margin: 0;
    line-height: 30px;
    font-weight: bold;
}

.head_graph > h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #000;
}

.bar_main {
    height: 200px;
    position: relative;
}

.bar_main > .line {
    height: 60px;
    width: 100%;
    border-top: 1px solid #ccc;
    line-height: 20px;
    font-size: 12px;
}

<div class="bar_graph">
  <div class="head_graph"><h2>Heading</h2></div>
  <div class="bar_main">
    <div class="line">3000,000 Mil</div>
    <div class="line">200,000</div>
    <div class="line">100,000</div>
    <div class="line"></div>
    <div class="bars_area">
    <div class="bars">
       <div class="inner"></div>
      <p>2016</p>
      </div>
      <div class="bars">
      <div class="inner"></div>
      <p>2015</p>
      </div>
      <div class="bars">
       <div class="inner"></div>
      <p>2014</p>
      </div>
      <div class="bars">
      <div class="inner"></div>
      <p>2013</p>
      </div>
      <div class="bars">
      <div class="inner"></div>
      <p>2012</p>
      </div>
    </div>
  </div>
</div>

Answer 3

首先将.bars_area设置为高度100％，然后在.bars上设置相对位置我希望这是你想要的。

＆＃13;

.bar_graph {
    width: 341px;
    height: 258px;
    background-color: #fff;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 20px 12px;
    display: block;
    border: 1px solid #a3a3a3;
}

span.line_gr {
    display: block;
    background-color: #3d4a7b;
    margin: auto;
    width: 24px;
    max-height: 177px;
    margin-left: 0;
    height: 100%;
}
.bars_area {
    width: 238px;
    float: right;
    position: absolute;
    bottom: -8px;
    right: 0;
    height: 100%;
}

.bars {
    float: left;
    margin: 0 10px;
    margin-top: 20px;
    height: 100%;
    width: 27px;
    position: relative;
}

.bars >p {
    font-size: 12px;
    margin: 0;
    line-height: 30px;
    font-weight: bold;
}

.head_graph > h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #000;
}

.bar_main {
    height: 200px;
    position: relative;
}

.bar_main > .line {
    height: 60px;
    width: 100%;
    border-top: 1px solid #ccc;
    line-height: 20px;
    font-size: 12px;
}

＆＃13;

<div class="bar_graph">
  <div class="head_graph"><h2>Heading</h2></div>
  <div class="bar_main">
    <div class="line">3000,000 Mil</div>
    <div class="line">200,000</div>
    <div class="line">100,000</div>
    <div class="line"></div>
    <div class="bars_area">
    <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

父元素应该有边距，填充设置为0.然后，子元素可以被赋予height:100%;的属性

无法达到100％的高度

4 个答案: