Как создать фиксированную боковую панель с CSS-скелетом?

Этот вопрос возник из stackoverflow.com Вопрос по a few years ago без ответов. Я хотел бы знать, изменились ли вещи, и теперь можно использовать Skeleton CSS с фиксированной, отзывчивой боковой панелью. Предпочтительно без необходимости использования Javascript.Как создать фиксированную боковую панель с CSS-скелетом?

Мой HTML выглядит следующим образом:

<html> 
    <head> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/skeleton.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
    </head> 
    <body class="container"> 
    <div class="row"> 
     <section class="three columns"> 
     <nav id="sidebar"> 
      sidebar content ... 
     </nav> 
     &nbsp; 
     </section> 
     <section id="content" class="nine columns"> 
     body content ... 
     </section> 
    </div> 
    </body> 
</html>

Я попробовал несколько различных способов в CSS, чтобы сделать врезку фиксированный (не прокручивается), но сохраняя расположение реагировать на изменение размера. Наиболее простой является следующим custom.css:

#sidebar { 
    position: fixed; 
}

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

Вот jsfiddle page, с которым можно поиграть с этой проблемой.

Как создать правильную фиксированную боковую панель с CSS-скелетом, которая корректно ведет себя к изменениям размера окна?

источник

2016-06-28 rityzmon

Не знаете, какая часть «исправления Skeleton-CSS» есть, но чтобы исправить перекрывающуюся проблему, вы должны были просто добавить «z-index: 9999;» в идентификатор #sidebar, и вы должны be good – Xariez

не знаю много о «Skelton-CSS», но вы можете добавить медиа-запросы для исправления для разных размеров окна. –

@ Xariez 'z-index' указывает на порядок отображения элементов для элементов, но не будет складывать два элемента один выше (в отличие от сверху) другой, когда область просмотра слишком узкая, не так ли? – rityzmon

Вы можете использовать «медиа-запрос, чтобы изменить поведение CSS, когда дисплей меньше, чем 480 в это ширина:

@media screen and (max-width: 480px) { 
    #sidebar{ 
     position: relative; 
    } 
} 

#sidebar{ 
    position: fixed; 
}

Используя это таким образом, это будет по отношению к тому, что если ширина меньше 480px, или фиксируется на более высоком разрешении

источник

2016-06-28 06:33:42

Спасибо. Я добавил запрос '@ media', как вы указали, но страница не делает ничего другого. Нужно ли мне что-то делать, чтобы включить медиа-запросы? – rityzmon

Ничего, я не понял, но мое окно браузера не изменяет размер ниже 500 пикселей, поэтому он не срабатывает. Благодарю. – rityzmon

Кроме того, я должен был иметь медиа-запрос * ниже * обычного CSS, чтобы заставить его запускать правильно. Это должно быть так? – rityzmon

комментарий к Guy Dafnys ответ:.

Поскольку скелет имеет «мобильный первый» подход, я думаю, было бы лучше, чтобы сделать это таким образом:

#sidebar{ 
    position: relative; 
} 

@media (min-width: 550px) { /*Skeletons default grid-activation width*/ 
    #sidebar{ 
    position: fixed; 
    max-width: 18%; /*Avoids overlapping*/ 
    } 
}

источник

2016-08-18 11:02:28

Как создать фиксированную боковую панель с CSS-скелетом?

ответ

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