Question

至少到目前为止，我已经查看了20个线程，很抱歉，如果之前已经回答过，但我找不到适合我特定css布局的解决方案。

我想以左列等于内容列的方式设置2列的高度彼此相等。我尝试过使用这样的多个javascripts： `

$(document).ready(function() {

    // get the heights
    l = $('#contentcolumn').height();

    // get maximum heights of all columns
    h = Math.max(l);

    // apply it
    $('#leftcolumn').height(h);
    });

和

document.getElementById("leftcolumn").style.maxHeight = document.getElementById("contentcolumn").style.height;

和

$("#contentcolumn").height($("#leftcolumn").height())

第一个代码的问题是它将左div降低到一些我甚至不知道的很长的高度。第二个和第三个代码完全没有变化。

有人可以帮助我吗？我知道这个问题可能是一个非常简单的解决方案，但我找不到，直到我才能睡觉！

清理后的新网页：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn">
</div>
</font>
</body>
</html>

清理后的新CSS：

body,
html {
background: #cacaca url(img/bg.png) repeat-x;
}
#maincontainer {
width:1000px;
margin:0 auto;
background: url(img/bg5.png) repeat-x;
}
#topsection {
background: #ffffff url(img/bg4.png) repeat-y;
height: 10px;
}
#leftcolumn {
float:left;
height: 100%;
width: 145px;
background: url(img/bg2.png) repeat-y;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 800px;
height: auto;
background: #dbdbdb url(img/bg3.png) repeat-x;
padding:10px;
}

Answer 1

你可以在没有javascript的情况下这样做 - 甚至可以跨浏览器的方式。这利用了相对定位元件内的绝对定位元件。如果您将#maincontainer div设置为position: relative而将#leftcolumn div设置为position: absolute，则可以在#leftcolumn上设置top和bottom，因此它始终采用其父级（#maincontainer）的高度，即使#maincontiner的高度由其子级设置（在这种情况下为#contentcolumn）。使用此jsfiddle demo并使用#contentcolumn的高度来查看#leftcolumn如何响应。

HTML：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div id="maincontainer">
            <div id="topsection"></div>
            <div id="leftcolumn"></div>
            <div id="contentcolumn"></div>
        </div>
    </body>
</html>

CSS：

body,
html {
    background: #cacaca;
}

#maincontainer {
    position: relative;
    width:500px;
    margin:0 auto;
    background: #000;
}

#topsection {
    background: #ffffff;
    height: 10px;
}

#leftcolumn {
    position: absolute;
    top: 10px; /* room for #topsection */
    bottom: 0;
    left: 0;
    width: 145px;
    background: red;
}

#contentcolumn {
    margin-left: 145px; /*Set left margin to LeftColumnWidth*/
    min-height: 500px;
    height: auto;
    background: #dbdbdb;
    padding:10px;
}

当其中一个的高度设置为自动和最大高度时，如何制作2个不同背景高度相同的2个div？

1 个答案: