CSS:div高度未垂直填充

我有一个div（在所附示例中，

.report

），我希望将其分为两个div（

.report title

和

.sections

）两个div都应该垂直填充容器div，我正在努力使这一点始终保持一致。我不想垂直拉伸容器；我希望

.report

的高度仅足以容纳内容，并且包含的两个div的高度相等。两个div都不应具有设置的高度或作为表的功能。我们的目标是使div的大小与

.report

、

.report title

和

.section

的高度相同的情况除外；他们都应该和目前高的人一样高

目前正在发生的情况如下所示：

或者这个：

我希望发生的事情是这样的：

或者这个：

我已经尝试将heights设置为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 -->

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%;
}

---

应用浮动：左侧；缩小宽度：36%；报告标题

您将

padding right:10px

设置为右div，这会将其向下推，即使它是浮动的，因为总宽度超出了空间

---

不使用

显示：表格和
显示：表格单元格
：

更新：更改css如下：


从你的解释中我可以得到你的意思是什么？


我改变了一些CSS选项，就像添加
float:left和<代码>浮动：右侧
您的帖子不清楚！！！你在期待什么？@ZaheerAhmed，我正在尝试使.report标题和.sections分区垂直填充.report分区。我将在问题的这一部分加粗，使其更清楚。@RokoC.Buljan谢谢，小提琴已经相应地更新了。关键问题仍然存在。什么问题@DavidY.Stephenson看到我的回答了吗在你的版本中，
.report
比它需要的要高，在底部留下了空白。我不想垂直拉伸容器；我希望
.report
的高度仅足以容纳内容，并且所包含的div的高度相等。好的，我会修复它。但是它们现在按照您的要求水平分开。对吗？我确实希望它们彼此并排，而不是在顶部，是的。从长远来看，我希望他们完全填满水平空间；在你链接的版本中，有一个空白。@DavidY.Stephenson我已经更新了我的小提琴。如果答案正确，我将更改我在答案中发布的css。你答案中链接的小提琴在所有三个div的底部仍然有额外的空白。我更新了我的问题，试图让这一点更清楚。在你的版本中，两个div彼此高于对方；我希望他们呆在一起。我添加了一些基本图形，试图让我的问题更清楚。在您的版本中，.report比它需要的高，在底部创建空白。我不想垂直拉伸容器；我希望.report的高度仅能包含内容，并且包含的两个div的高度相等。我已经更新了我的问题，让这个问题更清楚。@DavidY.Stephenson它的表现非常适合我。你在测试哪个浏览器？我在Windows上使用Chrome。
.report title
和
.sections
div都比包含其内容所需的高度高得多。虽然这适用于某些屏幕宽度，但每当
.sections
div比
高时，问题就会再次出现。在您的版本中，.report比需要的高，在底部创建空白。我不想垂直拉伸容器；我希望.report的高度仅能包含内容，并且包含的两个div的高度相等。我已经更新了我的问题和提琴，使之更清楚。
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%;
}

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%;
}