Как установить теги html и body, чтобы обернуть весь экран?

Что я хочу сделать, так это то, что теги html и body занимают весь экран любого компьютера. Пределы экрана в зависимости от экрана каждого компьютера без полос прокрутки или overflow:hidden.Как установить теги html и body, чтобы обернуть весь экран?

Это мой простой HTML код:

<body> 
    <div id="centerDiv"></div> 
</body>

Докажите 1

Так что я пытался в первую очередь он должен установить html и body тег с height: 100%;, но на экране появляется прокрутка. Это мой CSS:

html{ 
    height: 100%; 
    background-color: blue; 
} 

body{ 
    height: 100%; 
    background-color: green; 
} 

#centerDiv{ 
    height: 100px; 
    width: 100px; 
    background-color: red; 
    margin: auto; 
}

и у вас есть jsfiddle, в котором вы можете увидеть свиток.

Докажите 2

Затем, увидев, что свиток появляется, я попытался изменить html тег в min-height: 100%; так html тег будет выглядеть следующим образом:

html{ 
    min-height: 100%; 
    background-color: blue; 
}

и вы можете увидеть jsfiddle, в котором вы можете видеть, что прокрутка исчезает, но тег body занимают весь экран.

Докажи 3

Кроме того, я попытался установить оба html и body теги с min-height: 100%;, но результат это то же самое, как и в случае 2.

Я предположил, что min-height: 100%;, как указывает его имя, будет значением высоты по умолчанию в качестве ссылки на высоту родителя, но это похоже, не работает. Here было опубликовано как ошибка, но не в случае его использования на html или body тегах.

Оглядевшись Stackoverflow я мог видеть, что в некоторых случаях люди используют display:table для родительского элемента и display: table-row; для дочерних элементов, когда они используют min-height на родительском элементе, но так как в этом случае я использую html и body тегов I не знаю, правильно ли установить оба тега как table.

Производительность, которую я хочу, так это то, что моя веб-страница выглядит как моя вторая, но с body тегом, обертывающим весь экран.

Как я могу это достичь?

источник

2016-04-21 Francisco Romero

не забудьте сделать 'padding: 0; margin: 0'. –

Я бы предпочел добавить 'overflow: hidden', а также скрыть все полосы прокрутки, если вы не хотите их, когда пользователь запускает действие браузера (например, панель инструментов загрузки Chrome открывается) –

<body> имеет значение по умолчанию margin, так что вам нужно сбросить margin на <body>

html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: green; 
 
    margin: 0 
 
} 
 
#centerDiv { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
    margin: auto; 
 
}

<body> 
 
    <div id="centerDiv"></div> 
 
</body>

источник

2016-04-21 15:14:28 dippas

Альтернативой @ dippas, решение которого с помощью блоков видовых:

*, :before, :after { 
 
margin: 0; 
 
} 
 

 
body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background: green; 
 
}

источник

2016-04-21 15:14:11 timolawl

Учтите, что поддержка Edge и IE isn ' t полный, вы можете проверить здесь http://caniuse.com/#feat=viewport-units –

'Частичная поддержка означает не поддерживать блок« vmax ».' '' 'vmax' здесь не используется, но все же хорош указать на то. – timolawl

На всякий случай :) также, если вы хотите поддерживать более старые версии IE (я имею в виду, что почти все сторонние разработчики склонны притворяться, что они не существуют, я живу более счастливым именно так), это может вызвать проблемы –

Как установить теги html и body, чтобы обернуть весь экран?

ответ

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