4

いくつかの div があり、すべての div が同じ高さになるようにコンテンツの高さを埋める必要があります。高さはブラウザ ウィンドウのサイズ変更に対応する必要があるため、固定することはできません。div の数は 7 から 12 の間で変化します。これが純粋な css で実行できるかどうか、または jquery を使用する必要があるかどうかはわかりません。

前:
元の div http://imageshack.us/a/img14/9964/23446096.jpg

後:
リサイズされた div http://imageshack.us/a/img42/9183/76164750.jpg

4

2 に答える 2

1

これは思ったほど悪くはありませんでした。以下のコードを参照してください。

HTML

<html>
<head>
    <title>Test divs</title>
</head>
<body>
    <div id="header">Head</div>
    <div id="content">
        <div id="div1">Div 1</div>
        <div id="div2">Div 2</div>
        <div id="div3">Div 3</div>
        <div id="div4">Div 4</div>
        <div id="div5">Div 5</div>
    </div>
    <div id="footer">Footer</div>
</body>

CSS

body, html {
    height: 100%;
}

body, body * {
    margin: 0;
    padding: 0;
}

#header, #content, #footer, #div1, #div2, #div3, #div4, #div5 {
    border: 1px solid black;
}

#content {
    position: relative;
    height: 80%;
}

#div1, #div2, #div3, #div4, #div5 {
    position: absolute;
    right: 0;
    height: 20%;
    width: 150px;
}

#div1 {
    top: 0;
}

#div2 {
    top: 20%;
}

#div3 {
    top: 40%;
}

#div4 {
    top: 60%;
}

#div5 {
    top: 80%;
}

(境界線は視覚的な参照のみ) div の数に応じて、div の高さと上部の位置を調整します (100% / 0 から始まる div の数)。この質問に対するコメントによると、IE8 では動作しませんが、現時点ではテストする方法がありません。IE9、IE9互換モード、Chrome 24、FF 18で動作確認済み。

于 2013-01-31T17:01:26.853 に答える
1

次のようなもので jQuery を使用する必要があります。

var $yourDivs = $('div');
function update(){
    var $winHeight = $(window).height();
    var $divNumber = $yourDivs.length;
    var $newDivHeight = ($winHeight / $divNumber);
    $yourDivs.css('height', $newDivHeight + 'px');
};

ただし、ウィンドウの高さを取得する代わりに、コンテンツ領域の高さを取得してください。

于 2013-01-31T16:36:40.097 に答える