Поиск информации о совместимости CSS-браузера для настройки ширины с помощью левой и правой стороны.

StackOverflow https://stackoverflow.com/questions/128241

Вопрос

Вот вопрос, который не дает мне покоя уже год.Основной вопрос: как мне установить размер элемента относительно его родителя, чтобы он был вставлен на N пикселей с каждого края?Было бы неплохо установить ширину, но вы не знаете ширину родительского элемента и хотите, чтобы размеры элементов изменялись вместе с окном.(Вы не хотите использовать проценты, потому что вам нужно определенное количество пикселей.)

Изменить мне также необходимо предотвратить растяжение или сокращение содержания (или отсутствия контента) растяжения или сокращения обоих элементов.Первый ответ, который я получил, заключался в том, чтобы использовать отступы для родителя, и это отлично сработало бы.Я хочу, чтобы родительский элемент имел ширину ровно 25% и ту же высоту, что и клиентская область браузера, чтобы дочерний элемент не мог нажать на него и получить полосу прокрутки./Редактировать

Я пытался решить эту проблему, используя {top:Npx;left:Npx;bottom:Npx;right:Npx;}, но это работает только в некоторых браузерах.

Потенциально я мог бы написать Javascript с jquery, чтобы исправить все элементы при каждом изменении размера страницы, но меня это решение не очень устраивает.(Что, если я хочу сместить верх на 10 пикселей, а низ только на 5 пикселей?Все становится сложнее.)

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

Это было полезно?

Решение

А Модель 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 может достичь пиксельного совершенства при наличии этого требования к высоте.

Другие советы

Если вас интересует только горизонтальное расстояние, вы можете сделать все элементы дочернего блока внутри элемента родительского блока «вставленными» на определенную величину, задав отступ родительскому элементу.Вы можете сделать один элемент дочернего блока внутри элемента родительского блока «вставкой», задав поля элемента.Если вы используете последний подход, вам может потребоваться установить границу или небольшое отступы для родительского элемента, чтобы предотвратить схлопывание полей.

Если вас также беспокоит вертикальное расстояние, вам нужно использовать позиционирование.Родительский элемент необходимо позиционировать;если вы не хотите его никуда перемещать, используйте 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.

Просто примените некоторые отступы к родительскому элементу и не добавляйте ширину к дочернему элементу.Предполагая, что они оба 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;}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top