CSS Div ширина в процентах и заполнение без разрыва макета

там может быть простое решение для этого, но это беспокоило меня уже давно...

позвольте мне объяснить ситуацию. У меня есть div с идентификатором "контейнер", который содержит все содержимое на странице (включая верхний и Нижний колонтитулы также), который будет держать все в строке, и я могу сделать только 1 простой "margin:0 auto;" вместо кратных. Итак, скажем, что у меня ширина #container установлена на 80%. Теперь, если я помещаю другой div внутрь с той же шириной (80%) и даю ему идентификатор 'header' с 10px заполнения все вокруг, макет будет "сломать" (так сказать), потому что страница добавляет объем заполнения на ширину. Итак, как я могу заставить его оставаться в границах без использования таких методов, как более низкий процент для #header div? В принципе, я хочу сделать его жидким.

вот пример кода, чтобы дать вам представление о том, что я говорю...

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

может кто-нибудь помочь меня с этой проблемой, которая всегда меня беспокоила?

3 51
css padding fluid-layout

3 ответа:

если вы хотите #header чтобы быть такой же ширины, как ваш контейнер, с 10px заполнения, вы можете оставить его объявление ширины. Это приведет к тому, что он неявно займет всю ширину своего родителя (поскольку div по умолчанию является элементом уровня блока).

затем, поскольку вы не определили ширину на нем, 10px заполнения будет правильно применен внутри элемента, а не добавлять к его ширине:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

вы можете посмотреть это в действии здесь.

ключ при использовании процентных Ширин и отступов/полей пикселей не следует определять их на одном элементе (если вы хотите точно контролировать размер). Примените процентную ширину к родительскому элементу, а затем пиксельное заполнение / поле к display: block ребенок, не имеющий заданную ширину.

обновление

другой вариант для решения этой проблемы-использовать

89

Попробуйте удалить position С header и добавить overflow до container:

#container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}
2

вы также можете использовать CSS calc () функция для вычитания ширины вашего заполнения из процента ширины вашего контейнера.

пример:

width: calc((100%) - (32px))

просто убедитесь, что вычитаемая ширина равна общей прокладке, а не только одной половине. Если вы накладываете обе стороны внутреннего div с 16px, то вы должны вычесть 32px из конечной ширины, предполагая, что приведенный ниже пример-это то, что вы хотите достигать.

.outer {
  width: 200px;
  height: 120px;
  background-color: black;
}

.inner {
  height: 40px;
  top: 30px;
  position: relative;
  padding: 16px;
  background-color: teal;
}

#inner-1 {
  width: 100%;
}

#inner-2 {
  width: calc((100%) - (32px));
}
<div class="outer" id="outer-1">
  <div class="inner" id="inner-1"> width of 100% </div>
</div>

<br>
<br>

<div class="outer" id="outer-2">
  <div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>
1