Как сделать так, чтобы div имел рост родителя 100%, независимо от размера детей?Комплексная планировка - PullRequest
Новая
       27

Как сделать так, чтобы div имел рост родителя 100%, независимо от размера детей?Комплексная планировка

0 голосов
/ 12 июня 2018

У меня есть следующий макет на моей веб-странице:

enter image description here

Левая сторона, представленная здесь D, идеальна.Там много контента, и он прокручивается как следует.Даже когда содержимое увеличивается, высота остается на 100% высоты веб-страницы, а прокрутка увеличивается.

Правая сторона имеет некоторый контент на B.Все хорошо.При использовании Bootstrap 4 B и A являются row внутри col и, как таковые, имеют 50% долю в родительском контейнере.

Проблема в том, что я бы A заполнил все оставшееся пространство, будучи прокручиваемым, независимо от количества C s внутри него.Это означает, что при 1 C он должен иметь высоту, равную половине высоты страницы (как показано на рисунке), и имея 20 C с, он должен занимать ту же высоту (при возможности прокручиваться так, чтобы пользовательможно увидеть 20-е C, прокрутив до нижней части A).

Итак, я могу добиться вертикальной прокрутки на A, если установить жестко заданную высоту как height=350px, но этодалеко от идеала, так как рабочие столы имеют разную высоту.С другой стороны, если я не установлю высоту, высота A станет высотой, необходимой, чтобы обернуть все элементы внутри нее, так что с 4 C s расположение справа-bg уже превосходит левую частьвеб-страницы, что нарушает общий макет. 

<div class="right-bg">
<div class="container col" style="height:100%">
  <div class="row"> <!-- THIS IS B -->
    <div class="col"> 
      <div class="row" id="chart-div">
        <canvas id="myChart"></canvas>
      </div>
      <div class="row horizontal-menu-wrapper">      
      </div>
    </div>
  </div>
  <div class="container row ranking-container"> <!-- THIS IS A -->
    <div class="container rounded-card"> <!-- THIS IS C -->
      <div class="row">
        <div class="col-lg-1 col-md-1 col-sm-1">
          <div id="ranking-trophy-header" class="row card-header">
            <i title="General" class="fas fa-trophy header-icon"></i>
          </div>
        </div>
        <div class="col-lg-11 col-md-11 col-sm-11">
          <div class="row row-card">
            <div class="col-lg-5 col-md-5 col-sm-5">
              <p class="ranking-percentage-value"> Top 1%</p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Position</p>
              <p class="form-ranking-value"><span class="absolute-ranking">#<span class="absolute-ranking-value">83</span></span></p>
            </div>
            <div class="col ranking-field">
              <p class="form-field">Pool</p>
              <p class="form-pool-value">9470</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS: 

html {
  height: 100%;
}

body {
  height: 100%;
}

.left-bg {
  flex-flow: column;
  display: flex;
  width: 54%;
  height: 100%;
  overflow: scroll;
  padding-bottom: 10px;
}

.right-bg {
  flex-flow: column;
  display: flex;
  width: 46%;
  height: 100%;
  padding-top: 12px;
}

.ranking-container {
  vertical-align: center;
  margin: 5px;
  margin-top: 15px;
  margin-bottom: 5px;
  padding: 15px;
  overflow: scroll;
  border-radius: 10px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Вы можете дать любому элементу уровня блока явное значение height, а затем добавить: 

overflow: auto;

, что добавит полосу прокрутки к этому элементу , если содержимое элемента вышечем собственная явно объявленная высота элемента.

Вот макет, подобный описанному выше, с использованием CSS Grid .

Обратите внимание, что вертикальные полосы прокрутки автоматически отображаются вобласти D и A , поскольку содержимое этих элементов выше, чем высота самих родительских элементов.

Рабочий пример: 

main {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
width: 80vw;
height: 80vh;
border: 6px solid rgb(191, 191, 191);
border-radius: 15px;
}

.a-area {
background-color: rgb(255, 63, 63);
}

.b-area {
background-color: rgb(255, 127, 0);
}

.c-area {
border: none;
background-color: rgb(63, 63, 63);
}

.d-area {
grid-area: 1 / 1 / 3 / 2;
color: rgb(127, 127, 127);
}

main div {
color: rgb(255, 255, 255);
border: 4px solid rgb(191, 191, 191);
overflow-x: hidden;
overflow-y: auto;
}

main div h2 {
margin: 0;
padding-right: 6px;
font-size: 24px;
line-height: 36px;
text-align: right;
}

main div p,
.c-area {
margin: 6px 12px;
}
<main>
<div class="d-area">
<h2>D</h2>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

<div class="b-area">
<h2>B</h2>
</div>

<div class="a-area">
<h2>A</h2>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

<div class="c-area">
<h2>C</h2>
</div>

</div>
</main>
0 голосов
/ 12 июня 2018

Используйте d-flex, flex-column и h-100 для его родителя.И flex-grow-1 для строки, которую вы хотите, чтобы она занимала все доступное пространство.

html,
body {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col"></div>
  </div>
</div>

Работает, как и ожидалось, независимо от того, сколько у вас row.

https://codepen.io/anon/pen/RJVaKw

Вам необходимо использовать bootstrap-4.1, поскольку flex-grow-1 не существует в более ранней версии.

Большая часть вашего стиля не нужна.Вы можете добиться этого с помощью чистых классов Bootstrap.

Обновление

Это не работает в Chrome.Чтобы решить эту проблему, используйте flex-grow-1 для столбца внутри строки flex-grow-1.И установите для overflow-y значение scroll.Вы также можете скрыть полосы прокрутки.

html,
body {
  height: 100%;
}

.overflow-y-scroll {
  overflow-y: scroll;
}


/*hide scrollbar in webkit-browsers */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #FF0000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container d-flex flex-column h-100 bg-light">
  <div class="row">
    <div class="col p-5 bg-danger"></div>
  </div>
  <div class="row bg-info flex-grow-1">
    <div class="col flex-grow-1 bg-primary overflow-y-scroll">
      <!-- content -->
    </div>
  </div>
</div>

https://codepen.io/anon/pen/jKmYdq

0 голосов
/ 12 июня 2018

Попробуйте: 

<div class="container col" style="position: absolute; top: 0px; bottom: 0px; ">
</div>
...