Cross Browser Full Width CSS

Мне посчастливилось воссоздать определенный веб-сайт, но я не уверен, что лучший способ - создать шаблон с широким поперечным браузером. Я бы использовал HTML 5 и до сих пор имею:Cross Browser Full Width CSS

Я использую только 100% ширину?

HTML

<div id="wrapper"> 
    <header> 
     <h1>Logo Position</h1> 
     </header>

CSS:

#wrapper{ 
    width:990px; 
    height:100%; 
    min-height:100%; 
    background:#000; 
} 
header{ 
    width:100%; 
    height:100px; 
    color:#184C82; 
}

источник

2012-05-28 Jess McKenzie

Не работает ли это? – Blender

-1

Вы также должны использовать подобное ..

#wrapper { 
width:100%; /* or width:990px; */ 
height:100%; 
position:absolute; 
}

источник

2012-05-28 04:30:38

почему вы даете позицию: абсолютное? – sandeep

сила полностью регулирует высоту –

Это неправильный способ создать весь макет в абсолютном положении. – sandeep

Установка <header> ширины 100% будет только сделать его ширина его родителя, который является 990px. Если вы хотите, чтобы он простирался до 100% ширины окна просмотра, вам нужно либо вынуть его из обертки, поместить его в absolute или fixed, либо использовать :before и/или :after, чтобы создать впечатление, что это ширина в окне просмотра.

Chris Coyier продемонстрировал этот последний метод в своей статье Full Browser Width Bars.

источник

2012-05-28 04:25:18 Sampson

Просто используйте width:100% на заголовок, а затем удалите обертку. Постройте отдельные части вашего макета как отдельные DIV, используя <body> в качестве родительского элемента. Ты будешь золотой!

источник

2012-05-28 06:10:59 Nathanael

Вообще говоря, вы можете просто игнорировать ширину (то есть, не устанавливать ее нигде, или установить ее на auto, если она была ранее установлена чем-то, что вы не контролируете), и по умолчанию она будет по умолчанию. с небольшим отрывом по краям. Если вы хотите, чтобы запас ушел (кросс-браузер), необходимо установить оба поля и отступы 0 на обоих body и html:

body, html { 
    margin: 0; 
    padding: 0; 
}

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

Некоторые элементы, в частности таблицы, требуют объявления width: 100%, но divs и body нет, если вы не использовали одно из различных объявлений CSS, которые вызывают (т.е. display: inline-block, float: left или position: absolute). Обратите внимание, что width: 100% не совсем то же самое, что поведение элементов блока по умолчанию (включая тело) по умолчанию - элементы блока занимают столько места, сколько доступно, учитывая их поля, границы и отступы, тогда как все с width: 100% будет столь же широко, как и его родительский элемент - и любая маржа, граница или дополнение будут выходить за рамки этого.

источник

2012-05-28 07:42:11 Brilliand

@Brian Вы на месте. как только тело и тег html установлены так 'body, html {margin: 0; заполнение: 0; } ' Тогда заголовок, нижний колонтитул боковой панели и т. Д. Может удобно использовать%, например, 100%, 30% – Damilola

Cross Browser Full Width CSS

ответ

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