内部全高 div

Question

见下图我的底部灰色（父级div背景色）高度随父级divheight增加。我想要完整的描述 div 就像第一个 div （10px 填充所有边）。

我正在尝试的是：

代码：

body,html {
 margin: 0px;
 padding: 0px;
 font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
 font-size: 14px;
}
.container
{
 margin: 20px;
 float: left;
}
.mainC{
 width: 150px;
 padding: 10px;
 border: 1px solid #c7c7c7;
 background-color: #e7e7e7;
 position:relative;
 float:left;
 margin: 0 5px;
}
.mainC .title{
 padding: 5px;
 background-color: gray;
 color: white;
 text-align: center;
}
.mainC .discBody{
 background-color: #ffffff;
 padding: 5px;
 height: 81%;
}

<div class="container">
 <div class="mainC" style="height:200px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:225px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:250px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:275px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:300px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
</div>

我无法控制 .mainC 的内联样式 (height)。行内高度可以是任意的。

问题：如何为所有div设置合适的".discBody"高度？显示 .mainC 的填充总是 10px。

演示：http://jsfiddle.net/sachinkk/jdp09s1c/

谢谢！

Answer 1

主要问题是 .mainC .discBody{height:81%}，每个盒子的高度不同，因为它们的 parents 有不同的高度。 CSS calc() 可以提供帮助，browser support IE 9 及更高版本。

.mainC .title {
    padding: 5px;
    height: 30px;
    box-sizing: border-box;
}
.mainC .discBody {
    height: 81%; /* keep this as fallback */
    height: calc(100% - 40px); /* 10px for the spacing */
}

随后更新演示，也在 http://jsfiddle.net/ptao72w2/1/

body, html {
    margin: 0px;
    padding: 0px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.container {
    margin: 20px;
    float: left;
}
.mainC {
    width: 150px;
    padding: 10px;
    border: 1px solid #c7c7c7;
    background-color: #e7e7e7;
    position:relative;
    float:left;
    margin: 0 5px;
}
.mainC .title {
    padding: 5px;
    background-color: gray;
    color: white;
    text-align: center;
    height: 30px;
    box-sizing: border-box;
}
.mainC .discBody {
    background-color: #ffffff;
    padding: 5px;
    height: 81%;
    height: calc(100% - 40px);
}

<div class="container">
 <div class="mainC" style="height:200px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:225px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:250px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:275px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
 <div class="mainC" style="height:300px;">
  <div class="title">
   <span>Heading</span>
  </div>
  <div class="discBody">
   <p>This is discription part here</p>
  </div>
 </div>
</div>

Answer 2

而不是在 .mainC 中设置 height，在 discBody 中设置它。

HTML:

<div class="mainC">
    <div class="title">
        <span>Heading</span>
    </div>
    <div class="discBody" style="height:300px;">
        <p>This is discription part here</p>
    </div>
</div>

FIDDLE: https://jsfiddle.net/lmgonzalves/jdp09s1c/2/

Answer 3

如果您的内容决定框的大小而不是样式，这并不困难：

body,
html {
  margin: 0px;
  padding: 0px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.container {
  margin: 20px;
}
.mainC {
  width: 150px;
  padding: 10px;
  border: 1px solid #c7c7c7;
  background-color: #e7e7e7;
  position: relative;
  float: left;
  margin: 0 5px;
}
.mainC .title {
  padding: 5px;
  background-color: gray;
  color: white;
  text-align: center;
}
.mainC .discBody {
  background-color: #ffffff;
  padding: 5px;
}

<div class="container">
  <div class="mainC">
    <div class="title"> <span>Heading</span>

    </div>
    <div class="discBody">
      <p>This is discription part here This is discription part here This is discription part here</p>
    </div>
  </div>
  <div class="mainC">
    <div class="title"> <span>Heading</span>

    </div>
    <div class="discBody">
      <p>This is discription part here This is discription part here This is discription part here This is discription part here This is discription part here</p>
    </div>
  </div>
  <div class="mainC">
    <div class="title"> <span>Much Much Longer Heading</span>

    </div>
    <div class="discBody">
      <p>This is discription part here</p>
    </div>
  </div>
</div>

Answer 4

我会选择通过添加额外的 div 来更改标记以实现此效果。

在下面的代码中，我在每个 .mainC 容器中使用了一个名为 .mainC-inner 的绝对定位 div，并且 changed/moved 来自 [=15] 的一些样式=].

我选择使用边框来获得灰色轮廓和白色背景。这允许您将新的 .mainC-inner div 拉伸到 .mainC 父容器的确切高度，使用：

.mainC-inner {
   position: absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
   border:10px solid #e7e7e7;
   background: #fff;
}

这应该适用于所有浏览器，包括 IE8。这是一个 fiddle http://jsfiddle.net/nrnank32/

    body,html {
        margin: 0px;
        padding: 0px;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 14px;
    }
    .container
    {
        margin: 20px;
        float: left;
    }
    .mainC {
        width: 150px;
        border: 1px solid #c7c7c7;
        background-color: #e7e7e7;
        position:relative;
        float:left;
        margin: 0 5px;
    }
    .mainC-inner {
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        border:10px solid #e7e7e7;
        background: #fff;
    }
    .mainC .title{
        padding: 5px;
        background-color: gray;
        color: white;
        text-align: center;
    }
    .mainC .discBody{
        background-color: #ffffff;
        padding: 5px;
    }

<div class="container">
    <div class="mainC" style="height:200px;">
        <div class="mainC-inner">
            <div class="title">
                <span>Heading</span>
            </div>
            <div class="discBody">
                <p>This is discription part here</p>
            </div>
        </div>
    </div>
    <div class="mainC" style="height:225px;">
        <div class="mainC-inner">
                <div class="title">
                        <span>Heading</span>
                </div>
                <div class="discBody">
                        <p>This is discription part here</p>
                </div>
        </div>
    </div>
    <div class="mainC" style="height:250px;">
        <div class="mainC-inner">
            <div class="title">
                <span>Heading</span>
            </div>
            <div class="discBody">
                <p>This is discription part here</p>
            </div>
        </div>
    </div>
    <div class="mainC" style="height:275px;">
        <div class="mainC-inner">
            <div class="title">
                <span>Heading</span>
            </div>
            <div class="discBody">
                <p>This is discription part here</p>
            </div>
        </div>
    </div>
    <div class="mainC" style="height:300px;">
        <div class="mainC-inner">
            <div class="title">
                <span>Heading</span>
            </div>
            <div class="discBody">
                <p>This is discription part here</p>
            </div>
        </div>
    </div>
</div>

内部全高 div

Full height for inner div

html

css

height