Question

我有两个要求。

左边div必须与右边div相同
我需要一个页脚div。

这是代码。

HTML

<div id="base">
    <div id="leftleft">left
        <br/>I WANT THIS HEIGHT TO BE SAME AS RIGHT DIV
        <br/>
    </div>
    <div id="rightright">RIGHT DIV HEIGHT WILL BE
        <br/>CHANGED DYNAMICALLY.
        <br/>I WANT TO MATCH THE LEFT
        <br/>AND RIGHT DIV HEIGHT EQUALLY.
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>
    </div>
    <div id="footer">
        this has to be in the bottom
    </div>
</div>

CSS

#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
    float:left;
}
#rightright {
    display: table-cell;
    float:left;
}
#footer{
    clear:both;
}
#base {
    height: 100%;
    display: table;
    position:relative;
}

小提琴，

Demo in Fiddle

如果我将float:left页脚放下，但左侧div高度不匹配。

如果我删除float:left，则页脚div不会停止:(

Answer 1

试试此代码

删除 float:left;

就像这段代码一样

#base {
    height: 100%;
    width:100%;
    display: table;
}
#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
   vertical-align:top;
}
#rightright {
    display: table-cell;
  vertical-align:top;
}
#footer{
    display:table-row;
    width:100%;background:red;
}

<强> Demo

Answer 2

使用<table>

<table>
<tr>
<td>Left Div
</td>
<td>Right Div
</td>
</tr>
</table>

<footer>Footer</footer>

Answer 3

如何在每个DIV的CSS中使用min-height

min-height: 300px

Sample

OR

使用表格。在表格中，td标签始终具有相同的宽度和高度。

Answer 4

您可以试试approach。

添加高度：100％到body和html（确保body内的所有div都可以继承高度）。

body,html{height:100%;}

祝你好运!!

左侧Div和右侧Div应该在高度上相等..！

4 个答案: