2013-12-22 4 views
2

Я пытаюсь создать макет игры, который заполняет все окно браузера, но не прокручивается. Схема выглядит примерно так:Макет бутстрапа с полной высотой

+----------------------+ 
+  Header   + 
+------+---------------+ 
+  +    + 
+  +    + 
+ Side + Main  + 
+  + Fill Height + 
+  +    + 
+  +    + 
+----------------------+ 
+  Footer   + 
+------+---------------+ 

Боковая панель должна прокручиваться, если необходимо, но основное содержимое не должно. Макет должен быть отзывчивым: если браузер слишком узкий, сторона идет под заголовком и переключается так, как он представлен (вероятно, Footer также исчезает).

Я бы хотел использовать Bootstrap, но я не могу найти никакой информации о том, как такой макет может быть возможен. Имеет ли смысл даже использовать макеты начальной загрузки на этом дисплее? Или я должен просто скопировать CSS с абсолютными позициями (на основе%) и использовать виджеты bootstrap внутри разделов?

ответ

2

Я думаю, что вы можете создать этот тип макета, поставив боковую панель и основное содержимое в 100% -ую упаковку высоты/ширины.

Смотрите этот пример шаблона в Bootply: http://bootply.com/102032

EDIT: с планшетом sidebar_wrapper по высоте верхнего и нижнего колонтитула:

#sidebar-wrapper { 
     height: 100%; 
     padding: 50px 0 50px 0; /* pad top and bottom by height of header and footer */ 
     position: fixed; 
     border-right: 1px solid gray; 
    } 
+0

Колонтитул не отображается корректно работать. Обратите внимание на то, что левая панель выходит за нижний колонтитул (полоса прокрутки обрезана). –

+0

Я обновляю ответ и Bootply: http://bootply.com/102032 - соответствующим образом набиваем боковую панель. – ZimSystem

Смежные вопросы