CSS：div高度不垂直填充

Question

我有一个div（在附加的示例中，.report），我想将其分为两个div（.report-title和.sections）。 这两个div应该垂直填充容器div，而我正在努力使这种情况始终如一地发生。我不想垂直拉伸容器;我希望.report只能高到足以包含内容，并且两个包含的div都具有相同的高度。 div不应该具有设定的高度或作为表的功能。我们的目标是让div的响应大小，除了.report，.report-title和.section同样高;它们都应该与目前较高的高度相同。

目前发生的事情看起来像这样：

或者这个：

我想要发生的事情看起来像这样：

或者这个：

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

Answer 1

申请浮动：左;并减少宽度：36％; .report-title

Answer 2

Demo Fiddle

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：

更新：Click to see this fiddle

Answer 3

按以下方式更改您的CSS：

Here is Demo

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

Answer 4

从你的解释中我得到的是你的意思？ http://jsfiddle.net/dkeWs/10/

我添加了一些CSS选项，就像添加float: left;和float: right;

一样