CSS сетка с контейнером переполнения отступов

Question

Я пытаюсь создать нижний колонтитул, ширина которого составляет 100% (от тела).На левой стороне нижнего колонтитула, я хочу логотип.На правой стороне нижнего колонтитула, я хочу немного текста.Поэтому я решил попробовать использовать CSS-сетку.

Это почти то, что я собираюсь сделать:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 30% 70%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo"></div>
  <div class="footerGridQuestions"></div>
</div>

Однако я хочу добавить некоторые отступы слева от сетки, скажем, 10%, чтобы логотип не был так близко к левому краюкрай.Таким образом, вместо 30-70, я пробую 10-25-65.Однако сетка заканчивается переполнением.Почему это так?

Демонстрация проблемы:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

Я понимаю, что просто добавление еще одного элемента сетки на 10% вместо заполнения решает мою проблему, но мне любопытно, почему заполнение не работает таким же образом.

Answer 1

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

Вместо этого:

grid-template-columns: 30% 70%

Попробуйте это:

grid-template-columns: 3fr 7fr

Подробнее:

• Разница между процентами и единицами измерения в CSS Grid Layout

---

Во-вторых, удалите width: 100% из контейнера.

.footer {
  background-color: #2D1975;
  width: 100%; <---------- remove
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

Когда вы установите .footer в display: grid, он становится (или остается) элементом уровня блока.Такие элементы автоматически занимают всю ширину родительского элемента.

Однако, если вы добавите width: 100% к элементу уровня блока, он затем добавляет любые отступы, поля и границу к вычислению, что приводит к переполнению.Так что просто удалите его.

---

В-третьих, всей этой проблемы можно избежать, если добавить padding-left к самому логотипу, а не к контейнеру сетки или элементу сетки.

Answer 2

Когда вы выполняете заполнение HTML-элемента, он смещает содержимое (фактически создает пространство) относительно его границы

Когда вы выполняете отступ на 10% слева от вашегонижний колонтитул смещает содержимое на 10% от левой границы.Но у вас есть коэффициент сетки 25% и 65%, который составляет 90%.Остальные 10% являются фоновыми.

Для решения этой проблемы используйте соотношение 25% и 75% или любое соотношение, составляющее 100%.Тем не менее, заполнение приведет к переполнению общей ширины на 10%.Поэтому установите ширину нижнего колонтитула на 90%, что должно решить проблему переполнения.

.footer {
	background-color: #2D1975;
	width: 90%;
	height: 350px;
	display: grid;
    padding-left:10%;
    	grid-template-columns: 25% 75%;
    }
    
    .footerGridLogo {
    	background-color: red;
    }
    
    .footerGridQuestions {
    	background-color: green;
    }

<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

Answer 3

Вы когда-нибудь пытались удалить эту строку

    width: 100%;

из своего кода CSS?

Просто попробуйте и посмотрите результат.

Answer 4

Это размер блока .

Значение по умолчанию content-box, что означает, что значения padding и border добавляются к width.

Вы можете изменить это значение на border-box, которое включает padding и border в ширину.

Вот общий подход, из этой статьи :

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

Answer 5

Вы добавляете 10% слева от элемента div, а затем назначаете ширину равной 100%, это приводит к итоговому значению% 110, включая отступ.

Вставка в элемент div выше нижнего колонтитула и назначение содержимогодетский див на 100%

.container {
  padding: 10px;
}

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="container"> 
  <div class="footer">
    <div class="footerGridLogo"></div>
    <div class="footerGridQuestions"></div>
 </div>
</div>