Ширина пикселя и процентная ширина в пропорции

Я думаю, что я, возможно, уже знаю ответ на этот вопрос, но мне нужна проверка здравомыслия!

Скажем, у меня

#gridtest{
width:590px;
}

Я мог бы изменить ширину на процент, используя RESULT = TARGET/CONTEXT. В этом случае контекст представляет собой контейнер с максимальной шириной, установленной на 1000 пикселей, поэтому я могу это сделать:

#gridtestpercent{
width:59%; /*590/1000*/
}

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

#gridtest{
width:570px;
border:10px solid red;
}

Я могу использовать ширину, исходя из того, что цель теперь равна 570, но по мере того, как окно сокращается, все пропорции выходят из синхронизации.

#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}

Я не могу использовать процентную границу. Я не хочу использовать JS для проверки контекста, и я не могу использовать показ рамки CSS3.

Если бы я хотел использовать технику, описанную в интерактивном веб-дизайне Итаном Маркоттом, где все сжимается по отношению друг к другу, мне будет не повезло, если вы используете границу?

Ура!

Ответ 1

К сожалению, да, вам не повезло. Один хакерский способ обойти эту проблему - это оболочка div, которую вы используете для создания своей границы. Таким образом, внешний div будет 57% (в вашем примере) с фоном, который является цветом вашей желаемой границы. Тогда внутренний div будет иметь ширину 96% или около того (играйте с точным номером, чтобы найти границу, подходящую для вашего дизайна).

Ответ 2

Вы можете использовать функцию CSS3 calc(),

.selector{
  border: 5px solid black;
  width: -moz-calc(50% - 10px);
  width: -webkit-calc(50% - 10px);
  width: calc(50% - 10px);
}

SASS mixin

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}
article {
  border: 1px solid red;
  @include calc( width, '100% - 2px')
}

Ответ 3

Вместо рамки можно использовать вставную коробку-тень:

box-shadow: 0px 0px 0px 10px red inset;

Просто скопируйте внутреннюю часть контейнера, чтобы компенсировать.

Изменить: я пишу "pad", но, конечно, если вы используете прокладку, это отбросит размеры коробки. Поместите содержимое внутри.

Ответ 4

Принятый ответ неверен. У вас на самом деле есть 2 варианта:

Используйте свойство box-sizing, поэтому все прокладки и границы считаются частью размера:

.column {
    width: 16%;
    float: left;
    margin: 0 2% 0 2%;
    background: #03a8d2;
    border: 2px solid black;
    padding: 15px;
    font-size: 13px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Или используйте свойство outline вместо свойства border. У вас все еще будут проблемы с прокладками, но это будет проще добавить. Пример:

.column {
    width: 16%;
    float: left;
    margin: 0 2% 0 2%;
    background: #03a8d2;

    outline: 2px solid black;
}

Полное объяснение: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Ответ 5

Если вы хотите оставаться семантичным, вы можете использовать div { box-sizing:border-box; } или некоторые абсолютно позиционированные элементы :after. См. Сообщение Как добавить границу 1px к элементу, ширина которого равна проценту?

Ответ 6

Эта ссылка дает хорошее объяснение двух решений для этой проблемы:

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Ответ 7

В CSS3 вы также можете использовать новое свойство box-sizing, чтобы включить подсчет пикселей и заполнения в элемент width элемента:

box-sizing: border-box;

Ответ 8

Если возможно, в зависимости от вашего дизайна, то, что мне нравится делать, помещает границу как абсолютный div с шириной 3px (например) и высотой выше своего родительского div. Затем я устанавливаю переполнение скрытого в родительском div.