HTML-макет и содержание тела выходит за пределы установленной ширины и остается на одной линии - PullRequest
Новая
       9

HTML-макет и содержание тела выходит за пределы установленной ширины и остается на одной линии

1 голос
/ 10 июля 2009

У меня есть макет с заголовком, нижним колонтитулом, содержанием тела. Это довольно стандартная раскладка. У нас есть отчеты, которые иногда выходят за пределы жестко заданной ширины. Но нам нужны левая навигация и содержимое тела на одной строке. С помощью приведенного ниже 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.

/ * !!! МОЖЕТ ЛИ ЭТОТ РАЗДЕЛ ОСТАВАТЬСЯ НА ОДНОЙ СТРОКЕ КАК ЛЕВОЙ НАВ, ДАЖЕ, ЧТО ЭТО РАСШИРЯЕТСЯ ПОСЛЕ ПРОШЛОЙ ширины «ЖАТКА / ТЕЛО» * /

Ответы [ 2 ]

1 голос
/ 10 июля 2009

Хорошо, забудьте мое предложение margin-left, неправильно поняли проблему. Если вы хотите убедиться, что div всегда, скажем, 750px (так, чтобы левая навигация равнялась ширине заголовка), установите его ширину 750px и установите overflow: auto, чтобы добавить полосу прокрутки в этой части страницы, где это необходимо, или overflow: hidden, чтобы просто обрезать ее.

0 голосов
/ 10 июля 2009

Поцарапайте то, что я сказал раньше, я вас неправильно понял Попробуйте приведенный ниже код и дайте мне знать, если это то, что вы ищете. В противном случае вам нужно будет конкретизировать, что вам нужно. Однако, возможно, вы захотите проверить этот жидкостный макет , а затем поместить вокруг него обёртку 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>

...