Висота тіла 100% відображає вертикальну смугу прокрутки

Question 1

З цікавості, враховуючи приклад нижче, чому наявність поля у div #container призводить до того, що у браузері з’являється вертикальна смуга прокрутки? Висота контейнера значно менша за висоту тіла, яка встановлена на 100%.

Я встановив відступи та поля рівними 0 для всіх елементів, крім #container. Зауважте, що я свідомо пропустив абсолютне позиціонування в div #container. У цьому випадку, як браузер обчислює висоту тіла та як впливає на це поле?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Приклад також на JSFiddle

Question 2

Якщо ви намалюєте фони htmlта body(надаючи кожному свій колір) , ви швидко помітите, що bodyвони переміщуються вниз #container, а #containerсам не зміщується зверху body. Це побічний ефект краху поля , який я детально висвітлюю тут (хоча ця відповідь описує дещо іншу установку).

Саме ця поведінка призводить до появи смуги прокрутки, оскільки ви заявили, bodyщо має 100% висоту html. Зверніть увагу, що на фактичну висоту значення bodyне впливає, оскільки поля ніколи не враховуються у розрахунках висоти.

Question 3

Трохи пізно, але, можливо, це комусь допомагає.

Додавання float: left;до #containerвидаляє смугу прокрутки, як говорить W3C:

• Поля між плаваючою коробкою та будь-якою іншою коробкою не руйнуються (навіть між поплавцем та його потоками)

Question 4

На основі відповіді @ BoltClock ♦ я виправив це, обнуливши поле ...
так

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

працює, де ідентифікатор "st-full-pg" присвоюється div панелі (який додатково містив заголовок панелі та тіло панелі)

Question 5

додавання float:left;приємне, але заважатиме центральному горизонтальному позиціонуванню за допомогоюmargin:auto;

якщо ви знаєте, наскільки велика ваша маржа, ви можете врахувати це у своєму відсотку зростання за допомогою calc:

height: calc(100% - 50px);

підтримка браузера хороша, але лише IE11 + https://caniuse.com/#feat=calc

Question 6

html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

Це спрацювало для мене

Question 7

Я знайшов рішення: додати відступ: 1px 0; до тіла запобігає появі вертикальних смуг прокрутки

Question 8

html, body {
    height: 100%;
    overflow: hidden;
}

Якщо ви хочете видалити прокрутку тіла, додайте такий стиль:

body {
    height: 100%;
    overflow: hidden;
}

Question 9

Я бачив цю проблему виправлену раніше, коли ви поміщаєте весь вміст bodyу div, який називається wrap. Слід встановити стиль обгортання position: relative; min-height: 100%;. Щоб розташувати #containerdiv 50px зверху та ліворуч, покладіть div усередину обгортки з відступом, встановленим на 50px. Поля не працюватимуть із wrap та div, які ми щойно створили, але вони працюватимуть #containerі все, і всередині нього.

ось моє виправлення на jsfiddle .

Question 10

Натхненний @BoltClock, я спробував це, і це спрацювало, навіть при зменшенні та зменшенні.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

Я здогадуюсь bodyбув зміщений вниз 20px.

Question 11

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

Question 12

Для тих, хто приходить сюди для легшої для розуміння відповіді, яка включає навіть зразки коду, ця відповідь (скопійована звідси ) для вас.

Ніяких значень JavaScript або певних пікселів (таких як 100px) не потрібно, просто, чистий CSS і відсотки.

Якщо ваш div просто сидить там самостійно, height: 50%це означатиме 50% висоти тіла. Зазвичай висота тіла дорівнює нулю без видимого вмісту, тож 50% від цього - ну, нуль.

Це рішення (на основі цього ) (розкоментуйте backgroundрядки, щоб отримати візуалізацію відступів):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Розгорніть фрагмент

Вище написане для того, щоб все ще були звичайні прокладки. Ви можете встановити розміри червоного divдо 100%і по- , як і раніше бачити відступи з кожного боку / кінця. Якщо ви не хочете цього заповнення, скористайтеся цим (хоча це не виглядає приємно, рекомендую дотримуватися першого прикладу):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Розгорніть фрагмент

Question 13

Додати overflow: hidden;в html і тіло.

html, body {
  height: 100%;
  overflow: hidden;
}

Question 14

Я знайшов швидке рішення: спробуйте встановити висоту 99,99% замість 100%