2

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

我想以leftcolumn等于contentcolumn的方式将2列的高度设置为彼此相等。我试过使用多个这样的javascript：`

$(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;
}
4

1 回答 1

1

你可以在没有 javascript 的情况下做到这一点——甚至可以跨浏览器的方式。这利用了相对定位元素中的绝对定位元素。如果将#maincontainer div 设置为position: relative并将#leftcolumn div 设置为position: absolute，则可以同时设置#leftcolumn 上的top和bottom，因此它始终假定其父级（#maincontainer）的高度，即使#maincontiner 的高度由其子级设置（在这种情况下为#contentcolumn）。使用这个jsfiddle 演示并使用 #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;
}
于 2012-07-21T05:21:30.890 回答