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

Вот вопрос, который преследует меня уже год. Корневой вопрос заключается в том, как установить размер элемента относительно его родителя так, чтобы он был вставлен N пикселями из каждого края? Установка ширины будет приятной, но вы не знаете ширины родительского элемента, и вы хотите, чтобы элементы изменялись с помощью окна. (Вы не хотите использовать проценты, потому что вам нужно определенное количество пикселей.)Поиск информации о совместимости браузера CSS для установки ширины с использованием левого и правого

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

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

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

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

источник

2008-09-24 Mnebuerquo

The CSS Box model может предоставить вам проницательность, но я предполагаю, что вы не достигнете идеального макета с помощью CSS.

Если я правильно понял, вы хотите, чтобы родительский состав был 25% ширины и точно высотой области отображения браузера. Затем вы хотите, чтобы у ребенка было 25% - 2 дюйма в ширину и 100% -2 дюйма в высоту с n пикселями, окружающими ребенка. Никакая текущая спецификация CSS не поддерживает эти типы вычислений (хотя IE5, IE6 и IE7 имеют нестандартные support for CSS expressions и IE8 is dropping support для выражений 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%. Возможно, это пример заполнения, который вы представили в самом вопросе.

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

источник

2008-09-25 23:17:38

Просто примените некоторое дополнение к родительскому элементу и ширину дочернего элемента. Предполагая, что они оба - display:block, это должно работать нормально.

источник

2008-09-24 16:38:19 Dan

Вы также можете добавить к ребенку ширину и высоту 100%. – Liam 2008-09-24 16:43:44

Высота применяется только в том случае, если вы установили абсолютную высоту элемента предка и высоту для всех промежуточных предков. – Jim 2008-09-24 16:51:51

Или наоборот: установите margin дочернего элемента.

Floatutorial - отличный ресурс для таких вещей.

источник

2008-09-24 16:45:31 roosteronacid

Попробуйте это:

.parent {padding:Npx; display:block;} 
.child {width:100%; display:block;}

Он должен иметь пространство NPX со всех сторон, растягивая заполнить родительский элемент.

EDIT: Конечно, на родителя, вы можете также использовать

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}

источник

2008-09-24 16:48:07

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

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

источник

2008-09-24 16:50:26 Jim

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

ответ

Смежные вопросы