Flexbox - двухколонный макет - PullRequest
Новая
       29

Flexbox - двухколонный макет

1 голос
/ 05 апреля 2020

Я только начинаю с flexbox. Я пытаюсь создать макет из двух колонок.

Я создал приведенный ниже код, который работает, единственная проблема заключается в том, что контейнеры .menu и .content не растягиваются вниз при изменении размера окна браузера, так что появляются полосы прокрутки. Как я могу это исправить? 

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    body {
      margin: 0;
    }
    
    .wrap {
      display: flex;
      height: 100vh;
      background: aqua;
    }
    
    .menu {
      width: 280px;
      background: orange;
    }
    
    .content {
      flex: 1;
      background: green;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="menu">
      child
    </div>
    <div class="content">
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
      <h1>Content</h1>
    </div>
  </div>
</body>

</html>

Ответы [ 2 ]

2 голосов
/ 05 апреля 2020

Вы должны изменить height: 100vh для .wrap на min-height: 100vh; Таким образом, оно будет по крайней мере таким же высоким, как окно просмотра (т. Е. Окно), но приспособиться к контенту, если контент выше чем то, что вписывается в область просмотра (поскольку значение по умолчанию height равно auto, которое вам не нужно добавлять): 

.wrap {
  display: flex;
  min-height: 100vh;
  background: aqua;
}

.menu {
  width: 280px;
  background: orange;
}

.content {
  flex: 1;
  background: green;
}
<div class="wrap">
  <div class="menu">
    child
  </div>
  <div class="content">
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
  </div>
</div>
2 голосов
/ 05 апреля 2020

Измените height: 100vh; на min-height: 100vh; на .wrap CSS.

...