CSS:div高度不垂直填充

时间:2014-01-07 17:06:34

标签: css html height fill

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

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

enter image description here

或者这个:

enter image description here

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

enter image description here

或者这个:

enter image description here

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

按以下方式更改您的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%;
}

答案 3 :(得分:0)

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

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

一样