HTML-макет с фиксированной боковой панелью - PullRequest
Новая
       17

HTML-макет с фиксированной боковой панелью

0 голосов
/ 01 февраля 2019

У меня очень классическая раскладка, но, как ни странно, я не могу понять, что с ней не так.

У меня есть фиксированная боковая панель (ширина 15%) и содержимое (ширина 85%).Я дал 100% высоты всем контейнерам. 

<html>
<body>
 <did id="content">
   <div id="primary" class="content-area">
    <main id="main" class="site-main">  
    <div class="content">
        <section class="category_intro">

Я использую flexbox, и причина, по которой я дал 100% высоты всем контейнерам, заключается в том, что если я этого не сделаю, секции будут очень маленькими по высоте.Сначала мне нужно получить изображение полной ширины, затем секцию на 50% высоты, затем другую секцию на полную высоту и т. Д.

Предоставление 100% для всех контейнеров позволяет мне растягивать секции, но проблема в том, что ядело в том, что на некоторых страницах разделы в контейнере .content перекрывают друг друга ... и я не понимаю, почему.Когда я проверяю элемент, я вижу, что указатель не охватывает весь контейнер

enter image description here

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

1 Ответ

0 голосов
/ 01 февраля 2019

На сегодняшний день лучший способ построения макета - это использование CSS grid .Применение display:grid; к родительскому элементу ваших 2 основных элементов и использование grid-template-columns: 15% 85%; сделают все для вас. 

body {
  height: 100vh;
  
  display: grid;
  grid-template-columns: 15% 85%;
}

aside {
  background-color: blue;
}

main {
  background-color: green;
}
<body>
  <aside></aside>
  <main></main>
</body>
...