Child Div, который распространяется на полную высоту родительского Div - PullRequest
Новая
       17

Child Div, который распространяется на полную высоту родительского Div

0 голосов
/ 16 декабря 2018

Я пытаюсь, чтобы мой дочерний раздел div прошел до верха и низа родительского раздела div.Перейдите к нижней части примера этого URL-адреса (там, где стоят канадские флажки): https://www.lakeshoresup.com/product/pathfinder/ В основном, если я устанавливаю ширину больше 41%, я получаю небольшую область, которая не идет вверх инижняя часть раздела.

Код: 

    <div class="hero__container container">
       <div class="hero__content-wrapper" style="background-color: rgba(0,0,0,0.2); flex: 60% ; max-width: 60%;">
            <h1 class="hero__title hero__title--big">
  Adrift in the Canadian Rockies</h1>
  <p class="hero__content hero__content--medium">
    Jake and Lyndsay embark on a Lakeshore adventure with their inflatable paddleboards.  </p>
          <div class="primary-link">
            <a href="https://www.lakeshoresup.com/2015/07/28/adrift-in-the-canadian-rockies-with-jake-lyndsay-part-1/" class="hero__primary-link btn" target="_blank">
              Read Their Story    </a>
          </div>
        </div>
     </div>

CSS 

.hero--right .container {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.hero__content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    display: table-cell;
    vertical-align: top;
}

Я пытался добавить min-height:760px к CSS, который работал, но не динамический,Когда сайт переходит на мобильный или если слайдеры имеют разные размеры, это портит изображение.

Существует ли динамический способ заставить дочерний ящик (.hero__content-wrapper) всегда расширяться до верха родительского ящика (.hero__container)?

Это то, что я могу использоватьCSS ниже и он работает во всех браузерах или есть лучший способ сделать это? 

height: -moz-available;          
height: -webkit-fill-available;
height: fill-available;

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018

Matt -

Давайте разбавим пример для удобства чтения, но по существу создадим то же самое: 

<div class="container"> 
  <div class="box"></div>
</div>

CSS: 

.container {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid red;
}
.box {
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Здесь мы просто используемCSS Position, чтобы установить ссылку элемента на размеры контейнера.Затем мы нацеливаем на края границ верхнюю часть: 0 и т. Д. Это дает нам синий прямоугольник с неопределенными размерами, заполняя его родительский контейнер.

0 голосов
/ 16 декабря 2018

Я думаю, что нашел решение вашей проблемы.

.hero__content-wrapper {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     width: 100%;
}

Также, чтобы удалить максимальную ширину, так как она будет принимать ширину родительского элемента.Вы также можете добавить position:relative в класс .hero__container.Это решает вашу проблему?

...