HTML полный экран без полос прокрутки

Я попытался создать полноэкранный веб-сайт без полос прокрутки и проблемы с определением полей для этого. Учитывая минимальный пример:HTML полный экран без полос прокрутки

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

Почему я получаю желтый фон из html элемента в верхней стороне? Еще более удивительным для меня является то, что желтая часть исчезает, если я добавляю текст перед элементом h1.

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     Add some text and the yellow part disappears. 
 
     <h1>Heading 1</h1> 
 
    </body>

Есть ли идея, чтобы избежать желтую часть в верхней части без добавления текста до заголовка элемента?

источник

2016-06-23 Holger

Попробуйте Google «Свертывание полей». –

Элемент body - это неплавающий блок-элемент, как и содержащий элемент h1. Поэтому размер/положение элемента body адаптируется к его дочернему элементу h1, который имеет маржу (margin-top), определенную как значение по умолчанию.

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

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

источник

2016-06-23 10:12:12 MattDiMu

Просто введите margin-top:0; на свой h1. Example here

Я рекомендую использовать сброс CSS, чтобы избежать подобных проблем. Eric Meyer's очень хорошо известен и прост.

источник

2016-06-23 10:09:49 Joseph

При запуске нового проекта или, как правило, всегда стараются сбросить много предопределенных значений CSS, что браузеры "добавить". Там какая-то уже созданные «Сброс CSS» таблицы стилей, которые вы можете найти с помощью поиска Google, но для простого решения, которое вы всегда можете начать с:

* { margin: 0; padding: 0;}

Тогда вы всегда можете добавить дополнительные правила, которые будут влиять на все элементы ваш документ, например, «font-family: sans-serif» и т. д. Таким образом, вы уверены, что у вас есть прочная отправная точка, не имея слишком много разных взглядов в браузерах.

Позже вы можете добавить правила более явно к элементам, которые требуют укладки

источник

2016-06-23 10:25:19 Winthxr1909

это, как я хотел бы сделать полноценный сайт экрана, и это очень простой и чистый:

<body> 

<h1>Main heading</h1> 

</body>

код CSS:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

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

h1 { 
    color: #fff; 
    font-size: 40px; 
}

Так что, если вы даете вашему телу высоту 100vh (высота окна просмотра) он будет оставаться 100% от окна, независимо от размера it.Like это вы не будете иметь ар роблем с полосами прокрутки.

источник

2016-06-23 10:26:06

Вот почему часто что-то вроде normalize.css добавлено в проект, чтобы избежать этих вещей с разными браузерами и т. Д. height: 100vh; будет работать. Чтобы попасть в полосу прокрутки, вы также можете использовать overflow-y: hidden; или overflow-x: hidden; в зависимости от ситуации.

источник

2016-06-23 10:34:20

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

.img-responsive { background-size: 100%; } 
OR 

.img-responsive { background-size: cover; }

Вместо IMG тега, используйте фоновое изображение для полноэкранного изображения.

<header> 
    <div class="menu_area">...</div> 
</header> 


html, body, header { 
    height: 100%; 
} 
header { 
    background-image: url('images/image1.jpg'); 
    background-size: cover; 
}

источник

2016-06-23 10:37:21 as7

HTML полный экран без полос прокрутки

ответ

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