Почему рост 100% не может быть применен в моем div? - PullRequest
Новая
       20

Почему рост 100% не может быть применен в моем div?

0 голосов
/ 12 марта 2019

Может кто-нибудь объяснить мне, почему высота div.project-desc (дочерний элемент div.project) не занимает 100% своего контейнера, когда div.project находится при наведении?Это происходит, когда ширина области просмотра меньше 769px.Когда размер области просмотра больше 769px, все работает как положено.Я использую Bulma .tile и .box.Я понимаю, что это какой-то конфликт с медиа-запросом для элемента .tile, но я не могу понять, что это такое.Спасибо!Codepen: https://codepen.io/albertrf147/pen/OqOJqG?editors=1100

<section class="section is-white has-text-centered">
    <div class="container is-narrow">
      <h1 class="title">My Projects</h1>
      <h2 class="subtitle">Here is some of my work, which I'm most proud of.</h2>

      <div class="tile is-ancestor">

        <div class="tile is-4 is-vertical is-parent">

          <div id="project-1" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">CodePen</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>
          </div>

          <div id="project-2" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Glitch</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
        </div>

        <div class="tile is-parent">
          <div id="project-3" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Another</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
      </div>

    </div>
  </div></section>

CSS 

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css");

* {
  font-family: "Montserrat" !important;
}

body {
  background: #f5f5f5;
}

.hero-foot img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.list {
  margin-top: 30px;
}

.container.is-narrow {
  max-width: 1000px;
}

.skills {
  margin-top: -200px;
}

.tile.is-child {
  min-height: 200px;
}

.is-child.box {
  background-size: cover;
}

#project-1 {
  background-image: url("https://images.pexels.com/photos/449627/pexels-photo-449627.jpeg?cs=srgb&dl=beach-beautiful-bridge-449627.jpg&fm=jpg");
}

#project-2 {
  background-image: url("https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg?cs=srgb&dl=ai-codes-coding-97077.jpg&fm=jpg");
}

#project-3 {
  background-image: url("https://images.pexels.com/photos/5836/yellow-metal-design-decoration.jpg?cs=srgb&dl=art-creative-creativity-5836.jpg&fm=jpg");
}

.project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.project-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  //background: #000;
  opacity: 0.5;
  color: white;
  line-height: 2.5em;
  z-index: 2;
}

.project:hover .project-title {
  visibility: hidden;
}

.project-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 2.5em;
  padding: 0 24px;
  text-align: justify;
  //border-radius: 5px;
  color: transparent;
  background: #000;
  opacity: 0.5;
  //visibility: hidden;
  z-index: 1;
  transition: all 0.2s ease;
}

.project:hover .project-desc {
  color: #fff;
  height: 100%;
  border-radius: 5px;
}

.project-text {
  font-size: 0.8em;
}

Bulma css 

@media screen and (min-width: 769px), print
.tile.is-4 {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
}

@media screen and (min-width: 769px), print
.tile:not(.is-child) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tile.is-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.tile.is-parent {
    padding: .75rem;
}
.tile {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
}

Ответы [ 2 ]

3 голосов
/ 12 марта 2019

Если вы добавите position: absolute в .project-desc класс, он будет работать.Я отвечаю, основываясь на вашей ссылке на коде.

0 голосов
/ 12 марта 2019

Bulma .tile не является гибким контейнером ниже 769w. Вы можете заставить родительский тайл быть гибким контейнером, добавив приведенный ниже код в свой css. Это ни на что не влияет. 

.tile.is-parent {
  display: flex;
}
...