1

ヘッダー、フッター、本文のコンテンツを含むレイアウトがあります。かなり標準的なレイアウトです。ハードコードされた幅を超えることがあるという報告があります」しかし、左のナビゲーションと本文のコンテンツを同じ行に配置する必要があります。以下のこのHTMLコードでは、幅が広すぎる場合（たとえば、900以上の幅を持つコンテンツが本文にある場合）、本文のコンテンツは左ナビゲーションの下に流れます。

基本的に、その本文のコンテンツセクションに実際に含まれるコンテンツの量に関係なく、コンテンツと左ナビゲーションを同じ行に残しておく必要があります。常に同じ行のアイテムにそれらを保持するようにブラウザに強制する方法はありますか？

<html>
    <head>
        <title>Test</title>

        <style type="text/css">

            #bodyFull {

            }

            #header {
                border: 3px solid #f00;
                background-color: #99F;
                width: 900px;
            }

            #footer {

                border: 3px solid #909;
                background-color: #F99;
                width: 900px;

            }

            #leftNav {
                float: left;
                width: 150px;
                height: 800px;
                border: 2px solid #777;
                background-color: #FF9;
            }

            #bodyContent {
                float: left;

                border: 2px solid #707;
                background-color: #AAA;

                width: 1024px;
                height: 1024px;
                            overflow: hidden

            }

            #mainBody {

                width: 920px;
            }


        </style>

    </head>

    <body>

        <div id="bodyFull">

            <div id="header">
                The Header
            </div>

            <div id="mainBody">

                <div id="leftNav">
                    Left Nav
                </div>

                <div id="bodyContent">
                    The Body
                </div>

                The End of Main Body

            </div>
            <div style="clear: both"></div>
            <div id="footer">
                The Footer
            </div>

        </div>

    </body>

</html>

小さなタイプミス：bodyContentはleftNavと同じ行にあります。

/ * !!! このセクションは、左のナビゲーションと同じ行にとどまることができますが、「ヘッダー/ボディフル」の幅を超えても* /

4

2 に答える 2

1

OK、私のmargin-left提案を忘れて、問題を誤解しました。div が常に 750px であることを確認したい場合 (つまり、左の nav をヘッダーと同じ幅にするため)、その幅を 750px に設定しoverflow: auto、必要に応じてページのその部分にスクロールバーを追加するように設定します。 、またはoverflow: hidden単に切り捨てます。

于 2009-07-10T15:27:06.993 に答える
0

私が前に言ったことをひっかいて、私はあなたを誤解しました。以下のコードを試して、それがあなたが探しているものであるかどうか私に知らせてください。それ以外の場合は、必要なものをより具体的にする必要があります。ただし、この液体レイアウトを確認してから、設定された幅でラッパーdivを配置することをお勧めします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>

    <style type="text/css">

            #bodyFull {
            }

            #header {
                    border: 3px solid #f00;
                    background-color: #99F;
                    width: 900px;
            }

            #footer {

                    border: 3px solid #909;
                    background-color: #F99;
                    width: 900px;

            }

            #leftNav {
                    float: left;
                    width: 150px;
                    height: 800px;
                    border: 2px solid #777;
                    background-color: #FF9;
            }

            #bodyContent {
                    float: left;
                    border: 2px solid #707;
                    background-color: #AAA;
                                            width:748px;
                    height: 1024px;
                                            overfloat:auto;
            }

            #mainBody {
                                            width:906px;
                                            overfloat: auto;
            }


    </style>

</head>

<body>

    <div id="bodyFull">

            <div id="header">
                    The Header
            </div>

            <div id="mainBody">

                    <div id="leftNav">
                            Left Nav
                    </div>

                    <div id="bodyContent">
                            The Body
                    </div>

                    The End of Main Body

            </div>
            <div style="clear: both"></div>
            <div id="footer">
                    The Footer
            </div>

    </div>

</body>

于 2009-07-10T19:47:36.610 に答える