Css 修改。左侧高度取决于。右侧高度_Css_Height

Css 修改。左侧高度取决于。右侧高度

css

Css 修改。左侧高度取决于。右侧高度,css,height,Css,Height,我创建了一个测试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:fixe

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


html{
背景色：#ff8700
}
#标题{
宽度：99%；
高度：70像素；
利润上限：-10px；
背景色：红色；
边界半径：5px；
位置：固定；
z指数：1
}
.左{
宽度：5%；
高度：400px；
/*做同样的事，对吗*/
背景颜色：蓝色；
边界半径：5px；
浮动：左
}
.对{
宽度：94%；
高度：自动；
背景颜色：橙色；
边界半径：5px；
浮球：对
}
#页脚{
宽度：100%；
高度：自动；
边缘底部：-15px；
背景色：红色；
边界半径：5px；
清楚：两者都有
}
h1{
颜色：#fff；
字体系列：草书
}
试验
试验地点

乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫、自由党、全国政协、埃吉特·弗林吉利亚·奥迪奥·马萨·维塔·杜伊。在hac habitasse Plateum，一句名言。在法雷特拉岛上的大头鱼。奎斯克·塞德·奥古斯·自由，维塔·比本杜姆·托托。库拉比图尔·米拉库斯（Curabitur mi lacus）、特里斯蒂克·奎斯·维尼纳提斯（tristique quis venenatis non）、埃吉特·萨皮恩（imperdiet sapien）。奎斯克·努克·利古拉，康莫多·内克·佩伦茨克·塞德，马莱苏达·伊德·洛雷姆。在非兽人的冲突中，精英们被认为是欧盟的一个缺陷。Integer eu sem nec orci facilisis ultricies。Nam Fentum，quam ac vehicula porta，lectus tortor porta libero，位于乌尔纳ac purus。这是我的错，我的错。悬而未决的封建主义者，阿库姆桑·布朗迪特。发酵液舌苔。麦格纳accumsan est dapibus sodales的前庭。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。不需要一个公司，也不需要一个公司。Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·尤伊斯莫、自由党、全国政协、埃吉特·弗林吉利亚·奥迪奥·马萨·维塔·杜伊。在hac habitasse Plateum，一句名言。在法雷特拉岛上的大头鱼。奎斯克·塞德·奥古斯·自由，维塔·比本杜姆·托托。库拉比图尔·米拉库斯（Curabitur mi lacus）、特里斯蒂克·奎斯·维尼纳提斯（tristique quis venenatis non）、埃吉特·萨皮恩（imperdiet sapien）。奎斯克·努克·利古拉，康莫多·内克·佩伦茨克·塞德，马莱苏达·伊德·洛雷姆。在非兽人的冲突中，精英们被认为是欧盟的一个缺陷。Integer eu sem nec orci facilisis ultricies。Nam Fentum，quam ac vehicula porta，lectus tortor porta libero，位于乌尔纳ac purus。这是我的错，我的错。悬而未决的封建主义者，阿库姆桑·布朗迪特。发酵液舌苔。麦格纳accumsan est dapibus sodales的前庭。每一个康努比亚诺斯特拉，每一个

测试文本1
测试文本2
测试文本3

（c） 2012年Thisisonlytest.com

你可以测试一下。我希望蓝色块（.left）的大小与（.right）的大小相同。我尝试了高度

auto

和

100%

，但似乎不起作用，反而消失了。我还试着制作一个

.parent

，并将

.left

和

.right

放入

.parent

中。然后我将

。left

高度改为100%，但不起作用

帮帮我。

提前感谢。

将左侧更改为50%，右侧也更改为50%，并将其高度设置为相同。

我建议您使用一些jQuery将.left和.right设置为相同的高度

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

你可以在这里找到它：

添加具有固定高度的父级

div（.cointener）

，并应用

高度：自动两侧（.left
和.right
）
使用显示：表格单元格，而不是浮动两个块，并完全删除高度指令。其他一切都可以保持不变：
也许可以做一个jsFiddle。我想大多数人都懒得为你复制代码。