1

CSS の 100% の高さに問題があります。多数のチュートリアルとソリューションを検索しましたが、必要な結果が得られないようです。私が持っているのは、コンテンツが配置されるサイドバーとメイン列です。

コンテンツのためにメインの列が伸びるので、サイドバーの背景も伸ばしたいです。しかし、私が得たのは、サイドバーの背景がある時点で動かなくなり、完全に下がらないということです。

ここに画像の説明を入力

黒い背景は私のサイドバーで、コンテンツが横にあふれているように見えます。

私のコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>CSS 100% Height</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>

<body>
<div id="page">
<div id="sidecolumn">
</div>
<div id="maincolumn">
    <div id="content">
    contents
    </div>
</div>

</div>
</body>
</html>

CSS

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    font: 1.5em arial, verdana, sans-serif;
    min-height: 100%;
}

#sidecolumn {
    width: 500px;
    height: 100%;
    background: #000;
    float: left;
    }

#maincolumn {
    height: 100%;
    }

#page {
    height: 100%;
    }

私が見て試してみたtut http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

4

3 に答える 3

5

不動産を通じて、あなたの望みをdisplay:table-cellかなえます。

最初display:tableに親 div に定義display:table-cellし、次に子 div に定義すると、両方の div が垂直方向に等しくなります。

更新されたcss

#content {
    background: #EEE;
    font: 1.5em arial, verdana, sans-serif;
    display: table-cell;
}

#sidecolumn {
    width: 500px;
    background: #000;
    display:table-cell;
}

#maincolumn {
    height: 100%;
}

#page {
    height: 100%;
    display:table;
}

https://jsfiddle.net/9dhbL8ke/

于 2012-08-21T07:21:06.807 に答える
0

ポジショニングを使用して、サイドバーとメインバーを配置します。。。

 #sidecolumn {
position:relative;
top: 0px;
left:0px;
width: 100px;
height: 100%;
background: #000;
float: left;
}


#maincolumn {
position: relative;
left: 101px;
height: 100%;
}

これがフィドルです

于 2012-08-21T07:24:08.437 に答える
-1

等高関数を使用する

jQuery

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

$(document).ready(function() {
    equalHeight($(".eheight));

});

HTML

<body>
<div id="page">
<div id="sidecolumn eheight">
</div>
<div id="maincolumn eheight">
    <div id="content">
    contents
    </div>
</div>

</div>
</body>
于 2012-08-21T07:21:59.990 に答える