Блок выходит за границы родителя

95
14 января 2021, 15:00

Делаю сайт с 100% по высоте страницами. Есть 2 вопроса.

  1. Как сделать, чтобы .child не выходил за пределы, как по высоте при десктопомном виде, так и по ширине в @media.
  2. Как сделать чтобы параграф не выходил за пределы разрешенной высоты?

Думаю есть 1 решение для обоих проблем, но не могу найти.

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

Проблема 1. 

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>

Проблема 2.

Same problem here

Answer 1

html { 
  height: 100%; 
} 
body { 
  height: 100%; 
  max-width: 960px; 
  margin: 15px auto; 
} 
.parent { 
  height: 90%; 
  border: 1px solid red; 
  overflow-y: scroll; 
} 
.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: 97%;} 
}
<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
* {
  box-sizing: border-box;
}
body, p {
  margin: auto;
}
READ ALSO
Алгоритм не начинается сначала
HTML

Алгоритм не начинается сначала

Имеется вот такой код

 107
subline text 3 разделения вкладок
HTML

subline text 3 разделения вкладок

Подскажите пожалуйста, как сделать так, чтоб в ST3 на одном экране отображались сразу 2 окна, чтоб не постоянно не переключаться между ними

 102
Как добавить массив в Dictionary C#
c#

Как добавить массив в Dictionary C#

Есть Dictionary такого типа:

 127
Плавное изменение цвета в unity
c#

Плавное изменение цвета в unity

Нужно что бы спрайт плавное изменял свой цвет в красный оттенок ,а потом обратно в свой дефолтный (хочу сделать мигание)Возможно ли такое...

 104