2

これが私が達成しようとしていることです。私はこれらの行に沿って HTML を持っています (実際には、もちろん別の CSS ファイルを使用します):

    <div id="container" style="position:absolute; left:20px; top:20px; height:300px; width:400px;">
        <div id="header" style="width:100%;">ここにヘッダーが入ります... </div>
        <div id="content">コンテンツはこちら... </div>
    </div>

高さに関してヘッダーのサイズを自動調整し、残りの親 div をコンテンツで占有するようにします。コンテンツは正確に満たされる必要があります-スクロールバーなどはありません。最新のブラウザーを仮定すると、IE6 や IE7 は気にしません。

これまでに見たすべての例では、ヘッダーの高さが固定されていることを前提としています。自動サイズのヘッダーは JavaScript なしで実現できますか?それとも最新のブラウザーの機能を超えていますか?

4

2 に答える 2

1

やっぱりCSSでできるんですね。display:tableコンテンツ ペインの高さを 100% にする必要があります。残念ながら、ヘッダーとコンテンツ内に追加の <div> も必要になります。JSFiddle のリンクはhttp://jsfiddle.net/RBHXm/3/です。必要に応じてフッターを追加することもできます: http://jsfiddle.net/DE8pA/3/

マージンの崩壊を防ぐために、パディングも導入する必要があります。そうしないと、 <h1> のようなものが変に見えます。

HTML:

<div id="container">
    <div id="header" ><div><h1>Header stuff<br />here...</h1></div></div>
    <div id="content"><div><p>content stuff here...</p></div></div>
</div>

CSS:

/* colors to make the demo clear: */
#container { background: #ddd; }
#header { background: #ddf; }
#content { background: #dfd; }

/* CSS provided in question: */
#container {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 300px;
    width: 400px;
}
#header {
    width: 100%;
}

/* your fix: */
#container {
    display: table;
}

#container > * {
    display: table-row;    
}

#content {
    height: 100%;
}

#container > * > * {
    display: table-cell;
    padding: 0.01px;
}

/* optional styles to make it look pretty */
#content > div {
    border: 2px solid green;
}

#header h1 {
    text-align: center;
    margin: 3px;
    color: blue;
}
于 2013-07-01T20:52:24.357 に答える
1

このフィドルまたはその出力を見てください。ウィンドウのサイズを変更してみてください。

HTML:

<div id="container" style="height: 100%;">
    <div id="header" style="width:100% ">some stuff here...</div>
    <div id="content">ome other stuff here...</div>
</div>

JS:

$(document).ready(function () {
    var header_height = $("#header").height();
    var content_height = $("body").height() - header_height;
    $("#content").height(content_height);
});

$(window).resize(function () {
    var header_height = $("#header").height();
    var content_height = $("body").height() - header_height;
    $("#content").height(content_height);
});

CSS:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#header {
    height: auto;
    background-color: green;
}
#content {
    width: 100%;
    background-color: blue;
}

JS は、ウィンドウのサイズを変更しても、コンテンツ div が利用可能なすべてのスペースを確保するのに役立ちます:)

于 2013-06-27T21:32:10.663 に答える