Поиск информации о совместимости браузера CSS для установки ширины с помощью левого и правого
Вот вопрос, который не дает мне покоя вот уже год. Главный вопрос: как мне установить размер элемента относительно его родителя, чтобы он вставлялся на N пикселей с каждого края? Было бы неплохо установить ширину, но вы не знаете ширину родительского элемента и хотите, чтобы размер элементов изменялся вместе с окном. (Вы не хотите использовать проценты, потому что вам нужно определенное количество пикселей.)
Редактировать Мне также нужно предотвратить растяжение или сжатие обоих элементов содержимого (или его отсутствия). Первый ответ, который я получил, заключался в использовании дополнения к родительскому элементу, что отлично подойдет. Я хочу, чтобы родительский элемент имел ширину ровно 25% и точно такую же высоту, что и клиентская область браузера, без возможности дочернего элемента нажимать его и получать полосу прокрутки. /Редактировать
Я попытался решить эту проблему с помощью {top: Npx; left: Npx; bottom: Npx; right: Npx;}, но он работает только в определенных браузерах.
Я потенциально мог бы написать какой-нибудь javascript с jquery, чтобы исправить все элементы при каждом изменении размера страницы, но я не очень доволен этим решением. (Что делать, если я хочу, чтобы верхний смещение на 10 пикселей, а нижний только на 5 пикселей? Это усложняется.)
Что я хотел бы знать, так это либо как решить эту проблему кроссбраузерным способом, либо какой-то список браузеров, которые позволяют простое решение CSS. Может быть, у кого-то есть трюк, который упрощает эту задачу.
Ответы 5
Просто примените отступы к родительскому элементу и без ширины дочернего элемента. Предполагая, что они оба display:block, все должно работать нормально.
Высота применяется только в том случае, если вы установили абсолютную высоту для элемента-предка и высоту для всех промежуточных предков.
Или пойти другим путем: установить margin дочернего элемента.
Плавучий - отличный ресурс для подобных вещей.
Попробуй это:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
Он должен иметь пространство Npx со всех сторон, растягивающееся, чтобы заполнить родительский элемент.
Обновлено: Конечно, для родителя вы также можете использовать
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
Если вас интересует только горизонтальный интервал, вы можете сделать все элементы дочернего блока в элементе родительского блока «вставленными» на определенную величину, задав отступ для родительского элемента. Вы можете сделать единственный элемент дочернего блока в элементе родительского блока «вставкой», задав поля элемента. Если вы используете последний подход, вам может потребоваться установить границу или небольшое отступление на родительском элементе, чтобы предотвратить схлопывание полей.
Если вас также интересует вертикальный интервал, вам необходимо использовать позиционирование. Родительский элемент необходимо разместить; если вы не хотите никуда его перемещать, используйте position: relative и не утруждайте себя настройкой top или left; он останется там, где он есть. Затем вы используете абсолютное позиционирование для дочернего элемента и устанавливаете top, right, bottom и left относительно краев родительского элемента.
Например:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
Если вы хотите, чтобы содержимое не увеличивало ширину элемента, вам следует использовать свойство overflow, например overflow: auto.
Модель CSS Box может дать вам представление, но я предполагаю, что вы не достигнете идеального по пикселям макета только с помощью CSS.
Если я правильно понимаю, вы хотите, чтобы родительский элемент имел ширину 25% и в точности равнялся высоте области отображения браузера. Затем вы хотите, чтобы дочерний элемент был 25% - 2n пикселей в ширину и 100% -2n пикселей в высоту с n пикселями, окружающими ребенка. Никакая текущая спецификация CSS не включает поддержку этих типов вычислений (хотя IE5, IE6 и IE7 имеют нестандартные поддержка выражений CSS и IE8 прекращает поддержку для выражений CSS в режиме стандартов IE8).
Вы можете заставить родительский элемент занимать 100% области браузера и 25% ширины, но вы не можете растянуть высоту дочернего элемента до пиксельного совершенства с помощью этого ...
<style type = "text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id = "one">
<div id = "two">
<p>content ... content ... content</p>
</div>
</div>
... но появится горизонтальная полоса прокрутки. Кроме того, если содержимое сжато, родительский фон не будет превышать 100%. Возможно, это пример заполнения, который вы указали в самом вопросе.
Вы можете достичь иллюзия, который вы ищете, с помощью изображений и дополнительных div, но я не верю, что один только CSS может достичь совершенства пикселей с этим требованием высоты.
Это тот вывод, к которому я пришел. Я использую верхний / левый / нижний / правый угол, чтобы сместить края дочернего элемента по отношению к родительскому, но, кроме javascript, я думаю, что не получу совместимость с браузером. Даже javascript требует некоторой подтасовки.
Вы также можете добавить дочернему элементу ширину и высоту 100%.