Независимо прокручиваемые DIVs в столбце - PullRequest
Новая
       10

Независимо прокручиваемые DIVs в столбце

0 голосов
/ 08 октября 2018

У меня есть div (область основного содержимого), которая имеет 2 деления (верхний и нижний)

Мне нужно отобразить верхний и нижний делители на странице, но мне нужно, чтобы они оба занялитакое же количество места (50/50).Мне также нужно, чтобы их можно было прокручивать, когда их содержимое длиннее, чем доступное видимое пространство.

Я получаю 2 деления для выравнивания сверху и снизу, но они не занимают одинаковое количество места(50:50).Кроме того, если один из них имеет больше контента, чем другой, он растет, и мне приходится прокручивать страницу, а не div, как мне хотелось бы.

Вот мой код: 

#content {
  height: 100%;
}

#row {
  height: 100%;
  overflow-y: scroll;
}
<div id="content">
  <div id="row">
    top content
  </div>
  <div id="row">
    bottom content
  </div>
</div>

Я также пытался flex так: 

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#row {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}
<div id="content">
  <div id="row">
    top content
  </div>
  <div id="row">
    bottom content
  </div>
</div>

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Высота точки обзора (VH) 100%

Делая область основного контента (в моем примере body), 100vh сделает ее 100% высоты страницы.Затем установите divs на 50%;

enter image description here

body {
  height: 100vh;
}

#content {
  width: 100%;
  display: inline-block;
  height: 100%;
}

#row {
  color: #fff;
  height: 50%;
  overflow-y: scroll;
  background: #3b5998;

}

#row:first-of-type {
    background: red;
}
#row p {
padding-left:10px;
}
<body>
  <div id="content">
    <div id="row">
      <p>Top Content</p>
    </div>
    <div id="row">
      <p>Bottom Content</p>
    </div>
  </div>
</body>

body {
  height: 100vh;
}

#content {
  width: 100%;
  display: inline-block;
  height: 100%;
}

#row {
  color: #fff;
  height: 50%;
  overflow-y: scroll;
  background: #3b5998;
}

#row:first-of-type {
  background: red;
}

#row p {
  padding-left: 10px;
}
<body>
  <div id="content">
    <div id="row">
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
    </div>
    <div id="row">
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
    </div>
  </div>
</body>
0 голосов
/ 08 октября 2018

Нет необходимости использовать flexbox для этого.Вы можете установить высоту строк на 50% от области просмотра, используя vh unit: 

.row {
  height: 50vh;
  padding: 5px;
  overflow-y: auto; /* Or scroll if you want to always display the scrollbar */
}

.top {
  background-color: #FFCDD2;
  color: #B71C1C
}

.bottom {
  background-color: #BBDEFB;
  color: #0D47A1
}
<div class="content">
  <div class="row top">top content</div>
  <div class="row bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Примечание: идентификаторы html должны быть уникальными, если вам нужно несколько элементов с одинаковым идентификатором, вам следует использовать класс

0 голосов
/ 08 октября 2018

Вот как вы можете сделать это, используя flexbox: 

#content {
  height: 300px;
  width: 400px;
  display: flex;
  flex-direction: column;
  background-color: red;
  margin: auto;
  padding: 10px;
}

#top, #bottom {
  flex: 1;
  overflow-y: auto;
}

#top { background-color: yellow; }
#bottom { background-color: green; }
<div id="content">
  <div id="top">
    Sed pharetra lectus id dignissim interdum. Aliquam et tincidunt diam. Ut vitae cursus ipsum. Integer non felis ex. Nunc eget eros eros. Nam aliquet fermentum quam, pretium auctor nisl aliquet molestie. Cras gravida at velit dapibus porttitor.
  </div>
  
  <div id="bottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna tellus, malesuada at tempor a, commodo ut lacus. Integer tincidunt neque nunc, a rhoncus felis luctus nec. Nulla in ante nisl. Donec vel erat at sapien maximus tincidunt. Proin ac metus id diam consequat congue. Nulla ac vulputate erat. Vestibulum dui metus, egestas nec lorem ac, venenatis aliquet est. Nulla facilisi. Integer justo massa, vulputate non mauris et, venenatis gravida leo. Vestibulum sagittis suscipit gravida. Duis in viverra dui.
    Sed pharetra lectus id dignissim interdum. Aliquam et tincidunt diam. Ut vitae cursus ipsum. Integer non felis ex. Nunc eget eros eros. Nam aliquet fermentum quam, pretium auctor nisl aliquet molestie. Cras gravida at velit dapibus porttitor. Aliquam aliquam est eu aliquam tincidunt. Maecenas volutpat pellentesque est, non imperdiet ante rutrum ut. Praesent vehicula dui ligula, sit amet ornare tortor ultrices eu. Nullam in tortor at nunc tristique fermentum. Donec justo mi, ultrices sed finibus id, finibus non nibh. Nunc sodales, nibh id porta iaculis, velit sapien vehicula purus, sit amet faucibus augue lectus at massa. Cras nec mauris eu sapien fermentum condimentum sed nec neque.
  </div>
</div>

Свойство flex: 1; в #top и #bottom говорит им о равном распределении пространства.С overflow-y: auto; они не вырастут из #content, сохраняя при этом равную высоту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...