CSS：div高度不垂直填充
我有一个div（在附带的例子中， .report ），我想分成两个div（ .report-title和.sections ）。 这两个div应该垂直填充容器div，并且我努力使这一切始终如一 。 我不想垂直拉伸容器; 我想.report只有足够高以包含内容，并且所包含的div均具有相同的高度。 每个div都不应该有一个高度或功能作为表格。 我们的目标是让div的响应大小，除了.report ， .report-title和.section s .report-title 。 它们应该都具有与目前较高的高度相同的高度。
目前发生的事情如下所示：
或这个：
我想要发生的事情是这样的：
或这个：
我已经尝试将高度设置为100％，尝试一些jQuery技巧，目前为止没有运气。 这里最简单的解决方案是什么？
HTML：
<div class='report'>
<span class='report-title'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis elit non dui convallis, ut ornare est semper. Mauris eget libero vitae mi varius lobortis.
</span>
<span class='sections'>
<span class='report-section'>Date: 2013-05-07</span>
<span class='report-section'>Number: ABC123</span>
<span class='report-section'>Themes:
Chrome, Web Design, jQuery
</span>
<span class='report-section'>Sentiment: Positive</span>
<span class='report-section'>
URL:
<a href='http://api.jquery.com/Types/#Selector'>
http://api.jquery.com/Types/#Selector
</a>
</span> <!-- report-section -->
</span> <!-- sections -->
</div> <!-- report -->
CSS：
body {
height: 100%;
width: 100%;
}
.report {
border: 1px solid black;
text-align: left;
vertical-align: top;
display: inline-block;
height: 100%;
width: 90%;
}
.report-section {
background-color: lightgrey;
border-radius: 3px;
box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
display: inline-block;
margin-bottom: 10px;
margin-left: 10px;
padding: 5px;
text-align: left;
}
.report-title {
background-color: whitesmoke;
border-right: 1px solid black;
display: inline-block;
height: 100%;
padding: 5px;
font-size: 125%;
text-align: left;
text-decoration: bold;
width: 38%;
}
.sections {
background-color: blue;
display: inline-block;
float: right;
height: 100%;
padding-top: 5px;
padding-right: 10px;
width: 59%;
}
http://jsfiddle.net/dkeWs/
演示小提琴
html , body {
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
.report {
border: 1px solid black;
text-align: left;
vertical-align: top;
display: table;
width: 100%;
}
.report-section {
display:inline-block;
background-color: lightgrey;
border-radius: 3px;
box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
margin-bottom: 10px;
margin-left: 10px;
padding: 5px;
text-align: left;
}
.report-title {
background-color: whitesmoke;
border-right: 1px solid black;
display: table-cell;
padding-top: 5px;
padding-left:2px;
font-size: 125%;
text-decoration: bold;
min-width: 50%
}
.sections {
background-color: blue;
display: table-cell;
padding-top: 5px;
width: 50%;
}
你将padding-right:10px到了右边的div，即使它是浮动的也是如此，因为总宽度超出了空间。
不使用display:table; 并display:table-cell ：
更新：点击查看此小提琴
应用float：left; 并减少宽度：36％; .report标题
改变你的CSS如下：
这里是演示
html , body {
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
.report {
border: 1px solid black;
text-align: left;
vertical-align: top;
display: inline-block;
height: 100%;
width: 100%;
}
.report-section {
background-color: lightgrey;
border-radius: 3px;
box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
display: inline-block;
margin-bottom: 10px;
margin-left: 10px;
text-align: left;
}
.report-title {
background-color: whitesmoke;
border-right: 1px solid black;
display: inline-block;
height: 100%;
font-size: 125%;
text-align: left;
text-decoration: bold;
width: 38%;
}
.sections {
background-color: blue;
display: inline-block;
float: right;
height: 100%;
width: 59%;
}