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

123

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

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

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

Думаю есть 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;
}

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

135

HTML

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

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

135

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

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

160

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

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

136