Перекрытие Div при использовании фиксированного позиционирования в адаптивном макете.

Я создаю веб-сайт с адаптивным макетом.

У меня есть два столбца: боковая панель и контент.

Боковая панель имеет ширину 20% и имеет фиксированное положение, тогда как ширина содержимого составляет 80% со статической позицией.

Как сделать так, чтобы контент не скрывался под боковой панелью при уменьшении размера экрана?


html hide css position fixed
person mrgunston    schedule 15.11.2013    source источник
comment
Вы можете использовать медиа-запросы, чтобы изменить его с fixed на static для меньших размеров.   -  person davidpauljunior    schedule 15.11.2013
comment
адаптивный макет... фиксированное положение; если он реагирует, он не исправлен, а если он исправлен, он не реагирует... я бы сделал статический css и исправление с помощью js с обработчиком событий изменения размера   -  person mikakun    schedule 15.11.2013
comment
Я не согласен с тобой @mikakun, мы можем сделать и то, и другое.   -  person Lakshmi Prasanna    schedule 15.11.2013
comment
Кроме того, наверняка контент скрывается под боковой панелью на экране любого размера? Учитывая, что fixed выводит его из потока документов, 20% и 80% не имеют отношения друг к другу.   -  person davidpauljunior    schedule 15.11.2013

Ответы (3)


arrow_upward
0
arrow_downward 

overflow:hidden

Попробуйте добавить это

person Ink    schedule 15.11.2013

arrow_upward
0
arrow_downward

вы можете сделать это с помощью медиа-запросов

@media (max-width: 800px) {
  #sidebar {
    display: none;
  }
}
person Chanuka Asanka    schedule 15.11.2013

arrow_upward
0
arrow_downward

Когда вы делаете что-то fixed, оно выводится из документооборота. Таким образом, содержимое должно быть скрыто под боковой панелью независимо от того, установлена ​​ли ширина двух столбцов на 20% и 80%.

Вы можете увидеть это здесь: http://jsbin.com/OQOSEZoF/3/edit ( слова «80%» не отображаются).

Так что вам, вероятно, все равно придется установить padding-left: 20% для контента <div>. Это может решить вашу проблему самостоятельно.

Однако, если у вас есть другой контент на странице, например нижний колонтитул, который перекрывается фиксированным div, вы можете использовать медиа-запросы для изменения стилей в зависимости от размера экрана.

@media only screen and (max-width : 500px) {
  #sidebar {
    position: static;
  }
  #content {
    padding-left: 0; 
  }
}

Посмотреть демонстрацию можно здесь: http://jsbin.com/OQOSEZoF/6/edit.

Когда вы изменяете размер результата до размера менее 500 пикселей, текст в нижнем колонтитуле становится видимым, поскольку боковая панель становится статической.

person davidpauljunior    schedule 15.11.2013