0

我创建了一个测试 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>

你可以在这里测试它。我希望蓝色块 (.left) 的大小与 (.right) 相同。我尝试使用 heightauto和100%，但似乎没有用，而是消失了。我还尝试制作 a.parent 并放入. 然后我将高度更改为 100%，但没有工作。.left.right.parent.left

帮我。提前致谢。

4

4 回答 4

1

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

关联

于 2012-12-27T13:03:46.560 回答
0

将左侧更改为 50%，将右侧更改为 50%，并将它们的高度设置为相同。

于 2012-12-27T13:00:55.933 回答
0

我建议您使用一些 jQuery 使 .left 和 .right 具有相同的高度。

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

你可以在这里得到它：

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

于 2012-12-27T13:03:45.263 回答
0

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

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

于 2012-12-27T13:16:05.603 回答