Устранение неполадок с CSS-заполнением в адаптивном дизайне - PullRequest
Новая
       18

Устранение неполадок с CSS-заполнением в адаптивном дизайне

3 голосов
/ 15 июня 2011

В этом простом HTML5-макете слева должна отображаться панель навигации с всплывающим текстом (в процентах, а не в пикселях для гибкого адаптивного дизайна - расчеты в комментариях в CSS).

http://www.wturrell.co.uk/stackoverflow/20110615-01.html

Ширина элементов внутри div 'page' в точности составляет до 100%. Я хочу добавить отступы к определенным элементам, в данном случае к nav. Если я удаляю все отступы, они всплывают правильно, но отступы превышают 1 или 2 пикселя (независимо от того, в каких единицах измерения они указаны), и он ломается. Я не понимаю, почему это нарушает компоновку, так как это заполнение, поэтому, конечно, не должно изменять общий размер блока?

Что я пропустил?

Обновление - решение: http://www.wturrell.co.uk/stackoverflow/20110615-02.html

(Ширина отображения элемента = ширина плюс граница плюс отступ. Всего навигация должна быть номинальной 200 пикселей с отступом 20 пикселей справа, поэтому для плавного дизайна ширина = 180/900 * 100 или 20%, отступы = 20/900 * 100 или 2,222%, а основной текст остается 700/900 * 100 или 77,777%.)

Ответы [ 4 ]

7 голосов
/ 15 июня 2011

Во-первых, вам нужно добавить тип документа для запуска режима стандартов. Без этого на вашей странице будет использоваться режим причуда , что приведет к дьявольским проблемам , в частности к Internet Explorer.

Добавьте в качестве самой первой строки: 

<!DOCTYPE html>

Далее, ответ @Alex Ciminian является верным в отношении блочной модели (padding не считается частью width). Вы можете либо уменьшить width точно на величину padding, либо:

Использование box-sizing: border-box: https://developer.mozilla.org/en/CSS/box-sizing

Вы бы добавили его к любым элементам, где вы хотите, чтобы padding был включен в расчет width: 

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

Подробнее об этом см .: http://css -tricks.com / box-size /

Хорошая поддержка браузером этого свойства: http://caniuse.com/css3-boxsizing - везде, кроме IE6 / 7.

6 голосов
/ 15 июня 2011

В блочной модели CSS , padding добавляется к width, чтобы получить общий размер коробки. В вашем случае, если процентное соотношение ширины составляет до 100%, даже 1px будет означать, что содержимое переполнено.

Попробуйте установить отступы в процентах и ​​учтите это при их добавлении или оставьте буфер 1 или 2 процента по краям и добавьте небольшие отступы в пикселях.

3 голосов
/ 15 июня 2011

@ williant;Алекс прав padding & border добавить width к элементу.Итак, настройте width в соответствии с padding.

css: 

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}
1 голос
/ 13 января 2013

Вы можете попробовать использовать box-sizing: border-box; или установить max-width:100% и / или max-height:100%;.

Опция max-width и max-height css совместима со старыми версиями IE, если вы хотите сохранить совместимость.

РЕДАКТИРОВАТЬ:

Используйте код ниже, чтобы использовать размеры окна в браузерах: 

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