Блог

Главная - Вопросы по программированию - Установите ширину дочернего элемента относительно родительского с наличием поля

Установите ширину дочернего элемента относительно родительского с наличием поля

#html #css

#HTML #css

Вопрос:

Я хочу установить ширину header объекта на conatiner ширину с учетом header поля

 div.container {
  width:  100%;
  height: 300px;
  border: 1px solid red;
  position:relative;
}
    
header{
  width: 100%; 
  border: 1px solid green; 
  height: 20px;
  margin: 10px;
}  
 <div class="container">
  <header></header>
</div>

но header элемент выходит за пределы контейнера на несколько пикселей с правой стороны.
Также box-sizing: border-box; пытался header добавить в стиль, ничего не произошло. Почему?

Ответ №1:

Установить width: calc(100% - 22px); для header . Это 100% минус удвоенная граница (2 * 1px) минус удвоенное поле (2 * 10px), что составляет 22px.

 div.container {
  width:  100%;
  height: 300px;
  border: 1px solid red;
  position:relative;
}
    
header{
  width: calc(100% - 22px); 
  border: 1px solid green; 
  height: 20px;
  margin: 10px;
}  
 <div class="container">
  <header></header>
</div>

Комментарии:

1. поскольку ни одна из доступных настроек для определения размера поля (border-box, content-box, padding-box) не учитывает поля — поля находятся за пределами элемента.

2. есть ли более элегантный способ вычисления ширины? Что, если я захочу изменить поле позже или даже добавить отступы? Мне также нужно изменить calc функцию

3. затем вам нужно будет использовать javascript / jQuery для динамического получения этих значений

4. или вы используете LESS или SASS — тогда вы можете определить это значение поля как переменную и использовать его в своем LESS / SASS. Таким образом, вам нужно будет внести только одно изменение, но это менее очевидно.

Ответ №2:

Я предлагаю вместо использования полей для дочернего div — использовать padding:10px для родительского div. Я обновил ваш фрагмент кода.

 div.container {
  width:  100%;
  height: 300px;
  border: 1px solid red;
  position:relative;
  padding:10px;
}
    
header{
  width: 100%; 
  border: 1px solid green; 
  height: 20px;
}  
 <div class="container">
  <header></header>
</div>