Пиксельная граница и процентная ширина в пропорции

Question

Думаю, я уже знаю ответ на этот вопрос, но мне нужна проверка работоспособности!

Скажи, что у меня

#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-объявление box-border.

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

Ура!

Answer 1

Вы можете использовать функцию 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')
}

Answer 2

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

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

Просто заполните внутреннюю часть контейнера, чтобы компенсировать это.Конечно, если вы используете заполнение, он скинет размеры коробки.Вместо этого пометьте содержимое внутри.

Answer 3

Принятый ответ неверен.На самом деле у вас есть 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пограничной собственности.У вас все еще будут проблемы с отступами, но их легче добавить.Пример:

.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/

Answer 4

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

Answer 5

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

Answer 6

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

box-sizing: border-box;

Answer 7

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

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

Answer 8

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