Twitter bootstrap - исправлена ​​раскладка с прокручиваемой боковой панелью - PullRequest
Новая
       16

Twitter bootstrap - исправлена ​​раскладка с прокручиваемой боковой панелью

28 голосов
/ 03 апреля 2012

Я пытаюсь реализовать простой макет заголовка + 2 столбца с помощью Twitter начальной загрузки.

У меня фиксированный заголовок с шириной 100%, и сейчас я пытаюсь создать два столбца полной высоты фиксированной ширины с независимыми полосами прокрутки. Есть ли хороший способ сделать это с помощью Twitter начальной загрузки?

Вот изображение макета, который я пытаюсь построить Layout

Ответы [ 2 ]

35 голосов
/ 07 августа 2013

Используйте класс начальной загрузки ' с возможностью предварительной прокрутки ' на целевом div.Установите div на некоторой фиксированной максимальной высоте.Это эстетически хорошо.

8 голосов
/ 04 апреля 2012

Я нашел способ сделать это. Не уверен, что это лучше, но это помогает: 

<html>

<head>

    <link rel="stylesheet" media="screen" href="normalize.css">
    <link rel="stylesheet" media="screen" href="bootstrap.min.css">

    <style type="text/css">
            body, html {
                height: 100%;
                overflow: hidden;
            }

            .navbar-inner {
                height: 40px;
            }

            .scrollable {
                height: 100%;
                overflow: auto;
            }

            .max-height {
                height: 100%;
            }

            .no-overflow {
                overflow: hidden;
            }

            .pad40-top {
                padding-top: 40px;
            }
    </style>
</head>

<body>

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                header contents
            </div>
        </div>
    </div>

    <div class="container max-height no-overflow">
        <div class="row max-height">

            <div class="span8 scrollable">
                <div class="pad40-top">
                    main contents
                </div>
            </div>

            <div class="span4 scrollable">
                <div class="pad40-top">
                    right sidebar contents
                </div>
            </div>

        </div>
    </div>
</body>

http://jsfiddle.net/m4eS4/7/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...