3

目標

高さが定義されていない親の高さの 80% を持つ div を設定します。より具体的には、レスポンシブ効果が欲しいです。

問題

.header、.site > .container > .right sidebar 、.left content の5 つのレイヤーがあります。

ヘッダーの高さは 50 ピクセルです。サイトの高さは、ビューポートの高さ- 50 ピクセル (ヘッダーから)です。サイトの div の内部には、コンテナーがあります。彼の高さをビューポートの高さの 80% - ヘッダーから 50 ピクセル - サイトの div オフセット (1.5em パディング)に設定したいのですが、パーセンテージではなく、ピクセルのみで作業する必要があります。

FiddleJS

問題はここに示されています。

技術的な詳細

完璧に機能しているようですね。はい、完璧に動作します......ピクセルで。の高さを 80% に変更してみてください.left-content。問題が何であるかがわかります。

コード (FiddleJS と同じ)

HTML:

<div class="header">
</div>
<div class="site">
    <div class="container">
        <div class="container-head">
        </div>
        <div class="container-body">
            <div class="right-sidebar">
                Just a menu will be right here.
            </div>
            <div class="left-content">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS:

body {
    font-family: Tahoma
}

.header {
    background-color: #49c98e;
    width: 100%;
    height: 50px;
}

.site {
    padding: 1.5em 0;
}

.container {
    background-color: #c7c7c7;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.right-sidebar {
    background-color: #a94cd5;
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 500px;
    overflow-y: scroll;
}

.left-content ul {
    padding: 25px 0;
    float: left;
}

.left-content ul li {
    background-color: #a94cd5;
    width: 150px;
    height: 100px;
    float: left;
    margin: 15px;
    list-style: none;
}

jQuery/JavaScript:

function calculateResponsiveWidth() {
    $realWidth = $(".container").width() - $(".right-sidebar").outerWidth(),
    $containerContent = $(".left-content");

    $containerContent.css({
        "width": $realWidth
    });
}

$(window).on("resize", function () {
    calculateResponsiveWidth();
});

calculateResponsiveWidth();

前もって感謝します。

更新 v1

パーセンテージを使用することは最良の選択肢ではないと考え始めています。コンテナー領域の後には 25 ピクセルの間隔が必要です。パーセンテージでは、さまざまな解像度で維持されませんでした。

Media Query の提案がありましたが、Internet Explorer 8 に代わるものが必要です — 誰か推測できますか? JavaScript が私の問題を解決してくれるのではないでしょうか?

更新 v2

この問題は、ちょっとした JavaScript、数学、およびロジックで解決されました。貢献してくれたすべての人に感謝します！

4

3 に答える 3

1

コンテナ div に適用されたときに が理解されるようにheight:100%;、html、body、およびサイト div に設定する必要があります。height:80%これを行うと、フィドルが機能します。

http://jsfiddle.net/fvU5d/3/

コンテナ div をビューポートの 80% ではなく、サイト div の 80% にしたいという意味でない限り。

編集

これを試してください（http://jsfiddle.net/fvU5d/5/）：

var newHeight = $(window).height() - 50;
newHeight = newHeight + 'px';
$('.site').css('height',newHeight);
于 2013-06-05T13:13:32.013 に答える