CSS полная высота боковая панель, содержание отзывчивое

Я пытаюсь создать отзывчивый макет сайта с использованием каркаса скелета, но я не могу сделать полную высоту левой боковой панели и верхней панели. Покажите мне некоторые идеи о том, что делает его с или без каркаса, но необходимо реагировать, здесь у вас есть изображение:
http://i.stack.imgur.com/wZTCL.png
Пример кода:
CSS полная высота боковая панель, содержание отзывчивое

<html> 
    <body> 
    <div id="nav"> This is the navigation menu as shown in the picture below, including the logo</div> 
    <div id="topbar"> This is the top search/login bar </div> 
    <div id="content"> 
     <div id="event"> Event card </div> 
    </div> 
    </body> 
</html>

Вот скрипка, что у меня есть работал над: http://jsfiddle.net/zve96/.
Мой вопрос о том, как сделать файл css получить этот результат, как в изображении, которое я разместил?

источник

2014-03-17 Alexandru

На самом деле, путь, который выкладывается очень хорошо для mobile-- то, что я хотел бы сделать, чтобы удалить переполнения из элемента body и добавьте его во внутренний контент. – Chad

Да, но я не знаю, как это выяснить. Каждый раз, когда я пытаюсь сделать это в браузере, я получаю что-то совершенно другое. – Alexandru

Попробуйте настроить пример с помощью некоторого кода - это хорошее место для начала, если вы хотите, чтобы люди помогали вам. – Chad

Я хотел бы сделать что-то вроде этого (просто решая боковую панель для вас). Прежде всего, ваши CSS и HTML должны совпадать. Ваш HTML имеет боковую панель в качестве идентификатора, а ваш CSS имеет его как класс.

Одна из проблем, которые я вижу, заключается в том, что на вашем контенте есть явные значения ширины - если вы собираетесь использовать этот макет страницы (и исправьте меня, если я ошибаюсь), ваш блок #content должен быть 100% ширину страницы, кроме боковой панели. Если это так, то я хотел бы добавить в этом CSS:

body { 
    overflow: hidden; 
} 
#content { 
    width: auto !important; 
    height: 100%; 
    overflow: auto; 
}

Это отнимает переполнение от всего тела и восстанавливает его в область #content, предусматривая прокрутку и моделируемой fixed левой боковой панели. Вы можете это проверить здесь: http://jsfiddle.net/zve96/1/

Другой метод будет аналогичным, но с использованием абсолютного позиционирования. CSS будет выглядеть примерно так:

html, body { 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 
#nav { 
    background: #777; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 150px; 
} 
#topbar { 
    background: #333; 
    height: 40px; 
    left: 150px; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
#content { 
    bottom: 0; 
    left: 150px; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 40px; 
}

И вы можете проверить это один из здесь: http://jsfiddle.net/7Sk7j/

источник

2014-03-17 16:59:02 Chad

Надеюсь, это поможет, сообщите мне, если вы нуждаетесь в меня, чтобы настроить его.

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    height: 100%; 
} 
#topbar { 
    width: 100%; 
    height: 100px; 
    background: yellow; 
} 
#nav { 
    float: left; 
    width: 200px; 
    height: 100%; 
    background: red; 
} 
#content { 
    width: 100%; 
    height: 100%; 
    margin-left: 200px; 
    background: blue; 
    padding: 10px; 
} 
.event-card { 
    float: left; 
    margin: 10px; 
    background: green; 
    width: 150px; 
    height: 150px; 
}

HTML:

<div id="topbar"> </div> 
<div id="nav"> </div> 
<div id="content"> 
    <div class="event-card"> </div> 
    <div class="event-card"> </div> 
    <div class="event-card"> </div> 
    <div class="event-card"> </div> 
    <div class="event-card"> </div> 
</div>

Не обязательно "отзывчивым" (использовать media queries для этого), но ширина жидкости и полной высоты с помощью карт событий, которые будут корректировать столбцы основанный на ширине.

DEMO: JSFIDDLE

источник

2014-03-17 16:57:45

CSS полная высота боковая панель, содержание отзывчивое

ответ

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