Прокручиваемый div внутри div, проблема компоновки сетки - PullRequest
Новая
       116

Прокручиваемый div внутри div, проблема компоновки сетки

0 голосов
/ 09 мая 2020

Я хотел бы сделать определенный div прокручиваемым (оранжевый, высота неизвестна, возможно, больше области просмотра). Страница содержит контейнер, в который входят 3 дочерних элемента. Прокручиваемый div, который мне нужен, является частью одного из этих трех дочерних элементов. Если я установил overflow: auto на .con, прокрутка работает как шарм. Но мне не нужно пролистывать .con полностью. .b всегда должен быть виден. 

html, body {
  height: 100%;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
}

.a {
  background-color: yellow;
}

.b {
  background-color: orange;
  overflow: auto; /* doesn't work :( */
}
<div class="container">
  <div class="head">
    abc
  </div>
  <div class="sub">
    def<br>
    efg
  </div>
  <div class="con">
    <div class="a">
      fixed position
    </div>
    <div class="b">
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 09 мая 2020 
html, body {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
}

.a {
  background-color: yellow;
}

.b {
  background-color: orange;
  overflow-y: scroll; 
  height: 500px;
}
 <div class="container">
    <div class="head">
      abc
    </div>
    <div class="sub">
      def<br>
      efg
    </div>
    <div class="con">
      <div class="a">
        fixed position
      </div>
      <div class="b">
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123<br>
        123
      </div>
    </div>
  </div>
0 голосов
/ 09 мая 2020

оставьте прокрутку на .con и используйте position:sticky на .a

html, body {
  height: 100%;
  margin:0;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: min-content, min-content, auto;
  border: 1px solid red;
}

.sub {
  border: 1px solid blue;
}

.con {
  border: 1px solid green;
  overflow: auto;
}

.a {
  background-color: yellow;
  position:sticky;
  top:0;
}

.b {
  background-color: orange;
}

* {
 box-sizing:border-box;
}
<div class="container">
  <div class="head">
    abc
  </div>
  <div class="sub">
    def<br>
    efg
  </div>
  <div class="con">
    <div class="a">
      fixed position
    </div>
    <div class="b">
      start<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      123<br>
      end
    </div>
  </div>
</div>
...