Question

我创建了一个测试HTML文档

<!DOCTYPE html>
<html>
<head>
  <style>
  html {
    background-color:#ff8700
}

#header {
    width:99%;
    height:70px;
    margin-top:-10px;
    background-color:red;
    border-radius:5px;
    position:fixed;
    z-index:1
}

.left {
    width:5%;
    height:400px;
    /* Make the same of .right ? */
    background-color:blue;
    border-radius:5px;
    float:left
}

.right {
    width:94%;
    height:auto;
    background-color:orange;
    border-radius:5px;
    float:right
}

#footer {
    width:100%;
    height:auto;
    margin-bottom:-15px;
    background-color:red;
    border-radius:5px;
    clear:both
}

h1 {
    color:#fff;
    font-family:cursive
}

</style>
<title>Test</title>
</head>
<body>
    <div id="header"><h1>Test Site</h1></div><br>
    <div class="left"></div>
    <div class="right"><h2 style="margin-top: 40px">Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, libero ac ullamcorper consequat, nunc justo placerat neque, eget fringilla odio massa vitae dui. In hac habitasse platea dictumst. Maecenas dapibus purus in arcu lobortis pharetra. Quisque sed augue libero, vitae bibendum tortor. Curabitur mi lacus, tristique quis venenatis non, imperdiet eget sapien. Quisque nunc ligula, commodo nec pellentesque sed, malesuada id lorem. Proin non orci consequat elit lacinia scelerisque id eu lacus. Integer eu sem nec orci facilisis ultricies. Nam fermentum, quam ac vehicula porta, lectus tortor porta libero, in imperdiet tellus urna ac purus. Sed nec nulla arcu, quis lobortis dui. Suspendisse feugiat accumsan blandit. Quisque semper fermentum ligula quis vehicula. Vestibulum in magna accumsan est dapibus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla ullamcorper quam a nulla iaculis vel facilisis quam sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod, libero ac ullamcorper consequat, nunc justo placerat neque, eget fringilla odio massa vitae dui. In hac habitasse platea dictumst. Maecenas dapibus purus in arcu lobortis pharetra. Quisque sed augue libero, vitae bibendum tortor. Curabitur mi lacus, tristique quis venenatis non, imperdiet eget sapien. Quisque nunc ligula, commodo nec pellentesque sed, malesuada id lorem. Proin non orci consequat elit lacinia scelerisque id eu lacus. Integer eu sem nec orci facilisis ultricies. Nam fermentum, quam ac vehicula porta, lectus tortor porta libero, in imperdiet tellus urna ac purus. Sed nec nulla arcu, quis lobortis dui. Suspendisse feugiat accumsan blandit. Quisque semper fermentum ligula quis vehicula. Vestibulum in magna accumsan est dapibus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per</p>
        <ul>
            <li>Test text 1</li>
            <li>Test text 2</li>
            <li>Test text 3</li>
        </ul>
    </div>
    <div id="footer">(c) 2012 thisisonlyatest.com</div>
</body>
</html>

您可以对其进行测试here。我希望蓝色块（.left）与（.right）具有相同的大小。我尝试使用高度auto和100%，但似乎不起作用，而是消失了。我还尝试制作.parent并将.left和.right放入.parent。然后我将.left高度更改为100％，但没有效果。

帮帮我。提前谢谢。

Answer 1

添加具有固定高度的父div (.cointeiner)，并将height:auto;应用于双方（.left和.right）。

Link

Answer 2

将左侧变为50％，右侧也变为50％，并将它们的高度设置为相同。

Answer 3

我建议你使用一些jQuery使.left和.right保持相同的高度。

这个jQuery插件将获取您输入的最大元素的高度，并使所有元素都达到高度。

你可以在这里得到它：

http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 4

使用display: table-cell;，而不是浮动两个块，并完全删除高度指令。其他一切都可以保持不变：

http://jsfiddle.net/cwh9z/1/

根据.right高度修改.left高度

4 个答案: