Question

我的div min-height=100;内有div。

现在我想将height=80%;用于内部div，但它不起作用。请查看html和css部分：

＆＃13;

html,body{
  width:100%;
  height:100%;
}
.outer{
  width:100%;
  min-height:100%;
  background-color:gray;
  border:5px solid red;
}
.inner{
  height:80%;
  background-color:red;
}

＆＃13;

<div class="outer">

</div>
<div class="outer">
 <div class="inner">

 </div>
</div>

＆＃13;

当我使用height代替min-height用于外div时，它可以正常工作，但我无法使用height，因为内部div内容的高度1}}不固定。

对于小提琴手： jsfiddle（用3d外部div更新，高度超过100％）：

https://jsfiddle.net/mr_seven/d9ubjpe4/9/

由于

Answer 1

只需使用height: 80%即可。毕竟，您将最小高度设置为100％，这也是最大高度。所以，它似乎有点无意义。另外，你需要给你的div一个宽度。

Answer 2

使用padding-bottom而不是与min-height挣扎更好吗？

＆＃13;

html,body{
  width:100%;
  height:100%;
}
.outer{
  width:100%;
  height: 100%;
  min-height:80%;
  background-color:yellow;
  border:5px solid red;
}
.inner{
  height:80%;
  background-color:blue;
}

＆＃13;

<div class="outer">

</div>
<div class="outer">
 <div class="inner">
 
 </div>
</div>

＆＃13;

Answer 3

这应该适合你：

HTML：

body, html {
  height: 100%;
}

.outer {
  background-color: gray;
  height: 100%;
}

.inner {
  background-color: red;
  height: 80%;
}

CSS：

<div class="outer">
  outer
  <div class="inner">
    inner
  </div>
</div>

Answer 4

你在寻找这个...... Fiddler

<div class="outer">

</div>
<div class="outer">
 <div class="inner">

 </div>
</div>

CSS

html,body{
  width:100%;
  height:100%;
}
.outer{
  width:100%;
  height:100%;
  min-height:100%;
  background-color:gray;
  border:5px solid red;
  display: table;
}
.inner{
  height:80%;
  background-color:red;
}

Answer 5

问题已经通过一些jQuery代码解决了。

$(".inner").parent().addClass('fixedheight');

CSS：

fixedheight{
  height:100%;
}

现在我的所有外部div's都有min-height=100%;，如果其中一个（或多个）内部div，则外部div将具有固定高度

如何设置最小高度div内div的百分比高度？

5 个答案: