内部div的全高

时间：2015-05-27 14:35:09

标签： html css html5 css3 height

请参阅下图，我的底部灰色（父div背景颜色）高度随父div height而增加。我希望描述div的全高，如第一个div（10px填充所有方面。）

bottom gray color increasing as per height of parent div

我在尝试什么：

代码： 

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>

我无法控制height的内联样式（.mainC）。内联高度可能是其他任何内容。

问题：如何为所有div设置".discBody"的正确高度？用于显示.mainC的填充始终为10px。

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

谢谢！

4 个答案:

答案 0 :(得分：3)

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

在下面的代码中，我在每个div容器中使用了名为.mainC-inner的绝对定位.mainC，并更改/移动了.mainC中的某些样式

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

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

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

＆＃13;
＆＃13; 
    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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

主要问题是.mainC .discBody{height:81%}，每个盒子的高度都不同，因为他们的父母有不同的高度。 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>

答案 2 :(得分：0)

而是在new中设置height，将其设置为.mainC。

HTML：

discBody

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

答案 3 :(得分：0)

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

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>

相关问题
最新问题