.child-div переполняется .parent-div

Question

ребята!

Я создаю собственный сайт-портфолио.Идея состоит в том, чтобы сделать страницы в полный рост.В связи с этим у меня есть 2 вопроса.

1. Как я могу сделать .child-div не больше его .parent-div?
2. Как я могу сделать так, чтобы высота p-элементов не превышалабольше, чем его .child-div?

Думая, что есть какое-то (может быть, одно и то же) решение обеих проблем.

Переполнение не вариант, потому что он просто скрывает остальныеэлемента.

Я пытался установить .parent в качестве display: table и .child в качестве display: table-cell, но мне это не удалось.UPD: также попытался сделать div строки таблицы между .parent и.ширина ребенка: 100% и высота: 33%.К сожалению, без ожидаемого результата ..

Вот пример того, как это должно выглядеть, но .child переполняет .parent.

html {
  height: 100%;
}
body {
  height: 100%;
  max-width: 960px;
  margin: 15px auto;
}
.parent {
  height: 100%;
  border: 1px solid red;
}
.child-30 {
  min-height: calc(100%/3);
  width: 27%;
  margin: 10px;
  border: 1px solid green;
}
.child-70 {
  min-height: calc(100%/3);
  width: 67%;
  margin: 10px;
  border: 1px solid green;
}
.left {
  float: left;
}
.right {
  float: right;
}
@media only screen and (max-width: 750px) {
  .child-30, .child-70 {float: left; width: 100%;}
}

<div class="parent">
  <div class="child-30 left"></div>
  <div class="child-70 right"></div>
  <div class="child-70 left"></div>
  <div class="child-30 right"></div>
  <div class="child-30 left"></div>
  <div class="child-70 right"></div>
</div>

А вот ссылка, как это должно выглядеть с параграфами

Та же проблема здесь

Answer 1

Вы назначаете относительный размер min-height для контейнера для каждого элемента. Если вы уверены, что у вас будет 3 ряда блоков, вы можете использовать минимальную высоту с небольшим исправлением: min-height: calc(100% / 3 - 22px)

Почему -22? - 10 за каждое поле (сверху и снизу) - 1 для каждой границы (сверху и снизу) = 22 * ​​1007 *

Это проблема при изменении размера, потому что у вас будет 6 рядов блоков со 100% / 3 (что составляет 200% вместо 100%). Так что вам нужно сделать min-height: calc (100% / 6 - 22px), чтобы получить 100% от общего размера блоков.

Найдите ниже модифицированный код с Камил Пикула предложения по ширине.

НО , если размер ваших блоков является динамическим, и вы не хотите использовать переполнение или эллипсис, он не будет работать с min-height. Вам придется использовать динамическую высоту и делать разрывы строк для каждой строки с системой, подобной boostrap clearfix .

html {
  height: 100%;
}
body {
  height: 100%;
  max-width: 960px;
  margin: 15px auto;
}
.parent {
  height: 100%;
  border: 1px solid red;
}
.child-30 {
  height: auto;
  min-height: calc(100%/3 - 22px);
  width: 27%;
  margin: 10px;
  border: 1px solid green;
}
.child-70 {
  min-height: calc(100%/3 - 22px);
  width: 67%;
  margin: 10px;
  border: 1px solid green;
}
.left {
  float: left;
}
.right {
  float: right;
}
@media only screen and (max-width: 750px) {
  .child-30, .child-70 {
    float: left; 
    width: calc(100% - 22px);
    min-height: calc(100%/6 - 22px);
    }
}

<div class="parent">
  <div class="child-30 left"></div>
  <div class="child-70 right"></div>
  <div class="child-70 left"></div>
  <div class="child-30 right"></div>
  <div class="child-30 left"></div>
  <div class="child-70 right"></div>
</div>

Answer 2

Проверьте это, хотя лучше, если это полная страница.https://jsfiddle.net/indefinite/g7aqvkoy/33/

Я удалил height:100% в вашем .parent и добавил

.parent::after{
  content: "";
    clear: both;
  display: table;
}

html {
  height: 100%;
   padding:10px;
}
body {
  height: 100%;
  max-width: 960px;
  margin: 15px auto;
  padding:10px;
}
.parent {
  border: 1px solid red;
}
.child-30 {
    min-height: calc(100%/3);
  width: 27%;
  margin: 10px;
  border: 1px solid green;
}
.child-70 {
    min-height: calc(100%/3);
  width: 67%;
  margin: 10px;
  border: 1px solid green;
}
.left {
  float: left;
}
.right {
  float: right;
}
.parent::after{
  content: "";
    clear: both;
  display: table;
}
@media only screen and (max-width: 750px) {
 .parent{
   display:flex;
   flex-direction:column;
 }
.child-30 {
   width: 97%;
}
 .child-70{
   width:97%;

 }
  .parent::after{
  content: "";
    clear: both;
  display: table;
}

}

<div class="parent clearfix">
  <div class="child-30 left">
    <p>
    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. 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. 
    </p>
  </div>
  <div class="child-70 right">
    <p>
    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.  
    </p>
  </div>
  <div class="child-70 left">
    <p>
    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. 
    </p>
  </div>
  <div class="child-30 right">
    <p>
    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. 
    </p>
  </div>
  <div class="child-30 left">
    <p>
    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. 
    </p>
  </div>
  <div class="child-70 right">
    <p>
    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. 
    </p>
  </div>
</div>
<br/><br/>

Answer 3

У меня есть ответ на первый вопрос:

@media only screen and (max-width: 750px) {
  .child-30, .child-70 {float: left; width: calc(100% - 20px);}
}

Почему width: calc(100% - 20px)? Поскольку вы используете поля для .child-30 и .child-70 (margin: 10px - это поле margin-top, margin-right, margin-bottom, margin-left = 10px, а по сумме - поля margin-right и margin-left -> так 20 пикселей.