Процент ширины CSS Div и отступы без нарушения макета - PullRequest
Новая
       18

Процент ширины CSS Div и отступы без нарушения макета

53 голосов
/ 22 августа 2010

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

Позвольте мне объяснить ситуацию. У меня есть div с идентификатором 'container', который содержит все содержимое страницы (включая верхний и нижний колонтитулы), который будет держать все встроенными, и я могу сделать только 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 ]

90 голосов
/ 22 августа 2010

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

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

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

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

Вы можете увидеть это в действии здесь .

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

Обновление

Другим вариантом решения этой проблемы является использование box-sizing CSS-правила: 

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

Вот пост, рассказывающий о том, как размеры ящика работают .

4 голосов
/ 28 апреля 2018

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

Пример: 

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

Просто убедитесь, что вычитаемая ширина равна полному отступу, а не только половине.Если вы дополняете обе стороны внутреннего делителя 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>
2 голосов
/ 22 августа 2010

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

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