CSS: Как я могу избавиться от заполнения окна по умолчанию? Элемент, для которого задана ширина 100 %, не достигает границ окна.

Итак, у меня есть элемент, который находится непосредственно внутри тела:

<body>
    <div id="header">Some stuff...</div>
    Other stuff...
</body>

Ниже приведен используемый CSS:

body{
    text-align:center;
}
#header{
    margin:auto;
}

Таким образом, блок #header имеет ширину 100 % (по умолчанию) и располагается по центру. Проблема в том, что между границей окна и элементом #header есть "пробел"... Например:

|  |----header----|   |
^window border        ^window border

Я попытался настроить его с помощью javascript, и он успешно изменяет размер элемента до точной ширины окна, но не устраняет «пробел»:

$('#header').width($(window).width());

Похоже, что одним из решений является добавление следующих правил CSS (и сохранение приведенного выше javascript):

#header{
    margin:auto;
    position:relative;
    top:-8px;
    left:-8px;
}

В моем браузере это «пробел» составляет 8 пикселей, но я не уверен, что он одинаков во всех браузерах? Я использую Firefox на Ubuntu...

Итак, как правильно избавиться от этого пробела — и если это то, что я использовал выше, все ли браузеры действуют одинаково?


html padding css position width
person Alex    schedule 31.12.2010    source источник

Ответы (4)


arrow_upward
53
arrow_downward

body имеет поля по умолчанию во всех браузерах, поэтому все, что вам нужно сделать, это сбрить их:

body {
    margin: 0;
    text-align: center;
}

Затем вы можете удалить отрицательные поля из #header.

person BoltClock    schedule 31.12.2010
comment
О боже, я пытался удалить отступ тела, но я не подумал о поле... Я думал, что тело - это то же самое, что и окно, и что их границы расположены в одном и том же месте... Я не Не знаю, понятно ли это. ^^ В любом случае спасибо! - person Alex; 31.12.2010
comment
@Alex: Элемент, который больше связан с областью просмотра браузера (так сказать), — это html, а не body. Проверьте этот ответ для получения дополнительной информации. - person BoltClock; 31.12.2010

arrow_upward
10
arrow_downward

Простой способ решить эту проблему — избавиться от всех полей. И вы можете сделать это с помощью следующего кода:

* {
    margin:0;
}

Это решит проблему и даст вам более точный контроль над полями всех элементов.

person Bappy    schedule 28.08.2013
comment
Следует отметить, что это излишнее решение, которое в некоторых случаях может быть медленным. - person ; 25.02.2016

arrow_upward
2
arrow_downward

Добавьте их к тегу style в body, как показано ниже:

body { margin:0px; padding:0px; }

Это сработало для меня. Удачи!!

person Tharindulucky    schedule 21.12.2012

arrow_upward
0
arrow_downward

Я обнаружил, что эта проблема сохраняется даже при установке BODY MARGIN на ноль.

Однако оказывается, что есть простое решение. Все, что вам нужно сделать, это установить для вашего тега HEADER границу в 1 пиксель, а также установить BODY MARGIN равным нулю, как показано ниже.

body { margin:0px; }

header { border:1px black solid; }

Не уверен, почему это работает, но я использую браузер Chrome. Очевидно, вы также можете изменить цвет границы, чтобы он соответствовал цвету вашего заголовка.

person wardheed    schedule 02.11.2015