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 が非常に長い高さにドロップされることです。2 番目と 3 番目のコードは何も変更しません。

この問題にはおそらく本当に簡単な解決策があることを知っていますが、見つけることができず、そうするまで眠ることができません!

クリーンアップ後の新しいウェブページ:

<!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 を に設定し、 #leftcolumn div を に設定するposition: relativeと、 #leftcolumnで と の両方をposition: absolute設定できるため、 #maincontiner の高さが子によって設定されている場合でも、常に親 (#maincontainer) の高さと見なされます。 (この場合は #contentcolumn)。このjsfiddle デモを使用して #contentcolumn の高さを操作し、#leftcolumn がどのように応答するかを確認してください。topbottom

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 に答える