Макет страницы в два столбца с верхним и нижним колонтитулом - PullRequest
Новая
       18

Макет страницы в два столбца с верхним и нижним колонтитулом

1 голос
/ 21 мая 2011

Я пытаюсь создать макет из двух столбцов с верхним и нижним колонтитулом, чтобы левая полоса, верхний и нижний колонтитулы оставались фиксированными, а горизонтальная и вертикальная прокрутка должна отображаться на главном контенте на авто, что я достиг, так что 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>

<style type="text/css">

    .header{width:100%;}
    .left_panel{float:left; width:15%; height:500px; overflow:auto;background-color:#99CCFF;}
    .right_panel{float:left; width:85%; height:500px; overflow:auto;background-color:#FFFFCC;}
    .footer:{width:100%;margin-top:5px;}


</style>
</head>

<body>
    <div class="header">

        <h3>HEADER!</h3>

    </div>
    <div class="left_panel">Left Panel</div>
    <div class="right_panel">
            <p class="grey">

        Main content
        </p>


    </div>

    <div style=""></div>

    <div class="footer"><h3 align="center">Footer!</h3></div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 21 мая 2011

В этом случае вам действительно не понадобится clear: both, так как левая навигация и основное содержимое имеют одинаковую высоту, но учтите, что левая навигация также имеет overflow: auto, и она также покажет прокрутку дляэтот блок (если у вас там много контента).

У основного контента уже есть свитки, он зависит от количества контента .

Я сделал этопример http://jsfiddle.net/jackJoe/pADyc/, уменьшение высоты основного содержимого, чтобы вы могли видеть эффект.

РЕДАКТИРОВАТЬ: просто чтобы вас не смущало, я изменил основное содержимое, чтобы оно имело оригинальныйвысота, и с большим количеством контента, он, очевидно, показывает вертикальные прокрутки: http://jsfiddle.net/jackJoe/pADyc/1/

И теперь вы можете спросить о горизонтальных прокручиваниях ... Ну, он просто покажет их, если содержимое переполняется горизонтально,что происходит только с элементами блока (div с более широкой шириной, изображения, текст, который нельзя обернуть, вы получите изображение).

0 голосов
/ 21 мая 2011

Перед нижним колонтитулом добавьте пустой тег div: оба стиля.

...