1

私は自分のページで叫ぶ準備ができています、それは本当の戦いのように感じます. HTML アプリの完全なページ レイアウトを取得しようとしています。js で非表示にできる 2 つのメイン div を並べて配置しようとしています。また、各 div 内に 44px の高さのヘッダーがあります。私の問題は、オーバーフローが隠されていても、大きなコンテンツが最初の div に流れないようにできないように見えることです。すべてのコードを投稿することはできませんが、関連する部分を投稿できるはずです。コードの大部分は問題とは関係ありません。見やすくするためにJSfiddleを作成しました。前もって感謝します。ああ、そして私の投票を得るためのいくつかのヒント。列幅を変更しようとしないでください。境界に柔軟に対応する必要があります。前もって感謝します！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <title>Stack Overflow</title>
</head>
<body>
    <div id="page-holder">
        <div id="main-menu" class ="menu-width">
            <div class="wide vert-center-right header large">
                <div>
                <input id="search" type="text" class="search"/>
                <img class="visible-phone" src="css/images/logo.png" />
                </div>
            </div>
            <div id="menu-body" class="menu-body">
                <button class="wide small vert-center-left">Push Me</button>
            </div>
        </div>
        <div id="main-view" class="view-width">
            <div id="view-header" class="header view-header vert-align-left">
                <a href="#" class="visible-phone" onclick="resized()"><img class="plain" src="css/images/header-icon-back-18x18.png"/></a>
                <img src="css/images/header-logo.png" />
            </div>
            <div id="view-body" class="view-body">
                Large block of text that I want to not wrap into menu column. Large block of 
                text that I want to not wrap into menu column. Large block of text that I want 
                to not wrap into menu column. Large block of text that I want to not wrap into 
                menu column. Large block of text that I want to not wrap into menu column. 
                Large block of text that I want to not wrap into menu column. Large block 
                of text that I want to not wrap into menu column. Large block of text that 
                I want to not wrap into menu column. Large block of text that I want to not 
                wrap into menu column. Large block of text that I want to not wrap into menu 
                column. Large block of text that I want to not wrap into menu column. Large 
                block of text that I want to not wrap into menu column. Large block of text 
                that I want to not wrap into menu column. Large block of text that I want to 
                not wrap into menu column. Large block of text that I want to not wrap into 
                menu column. Large block of text that I want to not wrap into menu column. 
                Large block of text that I want to not wrap into menu column. 
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
</body>
</html>
4

2 に答える 2

2

それは、あなたが浮かん#main-menuでいるだけで、#main-view. この場合、#main-viewwill の内容がアイテムをラップし#main-menuます。

右からのコンテンツが左メニューの下を左に流れるのを止めたい場合は、 float を に割り当てる#main-viewか、 の幅に右マージンを加えたものに相当するパディングを使用します#main-menu。

後者のソリューションの場合:

$(document).ready(function() {
    var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */

    $("#main-view").css({
        "padding-left": offset_left 
    });
});

http://jsfiddle.net/teddyrised/gGt9S/3/

[編集]: ブラウザーのサイズが変更されたときに、さまざまな最小幅と最大幅を使用している場合や、より応答性の高いレイアウトのために、すべてのピクセル値を再計算することをお勧めします。.resize()これを実現するには、上記のコードを関数でラップするだけです。

$(document).ready(function() {
    $(window).resize(function() {
        // Calculate the necessary offset
        var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */

        // Assign left offset as padding
        $("#main-view").css({
            "padding-left": offset_left 
        });
    }).resize();

    // Note: we fire resize() once when the window loads so that everything is calculated properly the first time the page loads (because by default, resize() is not triggered upon page load)
});

http://jsfiddle.net/teddyrised/gGt9S/4/

完全を期すために、イベントをデバウンスする方法を検討することをお勧めします。Chromeなど.resize()のブラウザーは、ユーザーがウィンドウのサイズ変更ハンドルをドラッグしているときにイベントを継続的に発生させ、低速のコンピューターではブラウザーのパフォーマンスに影響を与える可能性があります。関数内の計算が多すぎ.resize()ます。

于 2013-03-07T18:33:18.033 に答える
1

これがうまくいくかどうかはわかりませんが、高さを設定すると、div目的を達成するのに役立ちます。をmin-height特定の値に設定height:autoし、さらにデータがある場合に役立つように設定しました。テキストがメニュー部分に流れ込むのを避けます これは JSFiddle http://jsfiddle.net/gGt9S/2/です

于 2013-03-07T18:36:40.873 に答える