Вопросы Теги

как я подгоняю свой фон gif на страницу? [Дубликат]

new_list = list(old_list)

647
задан Josh Crozier 14 September 2014 в 02:22
поделиться

21 ответ

Попробуйте установить высоту элемента html на 100%. 

html, 
body {
    height: 100%;
}

Тело смотрит на родителя (HTML), как масштабировать динамическое свойство, поэтому для элемента HTML необходимо также установить его высоту.

Однако содержание тела, вероятно, должно измениться динамически. Установка минимальной высоты до 100% выполнит эту задачу. 

html {
  height: 100%;
}
body {
  min-height: 100%;
}
825
ответ дан idmean 21 August 2018 в 01:32
поделиться
  • 1
    спасибо, это, кажется, удаляет белую полосу на коротких страницах, но теперь на страницах, высота которых превышает высоту окна браузера, я получаю нижнюю белую полосу 20px: | – bodyofheat 11 July 2011 в 20:01
  • 2
    хорошо, я узнал! он работает, если я добавляю html, body {min-height: 100%;}: D – bodyofheat 11 July 2011 в 20:32
  • 3
    не работает для Chrome – bFunc 19 July 2014 в 13:29
  • 4
    Примечание: если вы используете версию body {min-height}, вы не можете использовать трюк .body-child{height: 100%}. – Salman A 6 December 2014 в 10:52
  • 5
    лучший ответ с CSS3, используя vh - & gt; body { height: 100vh } - проверьте ответ здесь stackoverflow.com/a/25829844/2680216 – Adriano Resende 2 October 2015 в 17:53

Попробуйте 

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
1
ответ дан ak-SE 21 August 2018 в 01:32
поделиться
  • 1
    Не могли бы вы объяснить, пожалуйста, какова возможная цель width: 100% для элементов body и html? Да, я понимаю, что с практической точки зрения body { margin: 0; } должно быть достаточно в большинстве случаев. Я просто хочу понять более подробно. – john c. j. 23 January 2017 в 18:44

Здесь обновление 

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
0
ответ дан Anburaj_N 21 August 2018 в 01:32
поделиться

Если у вас есть фоновое изображение, тогда вы захотите установить это вместо: 

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Это гарантирует, что тег тела можно продолжать расти, когда контент выше, чем область просмотра, и что фоновое изображение продолжает повторяться / прокручиваться / когда вы начинаете прокручивать вниз.

Помните, что если вам нужно поддерживать IE6, вам нужно будет найти способ клина в height:100% для тела, IE6 рассматривает height как min-height в любом случае.

113
ответ дан Angry Dan 21 August 2018 в 01:32
поделиться
  • 1
    Также работает, когда имеется глобальный flexbox прямо под телом (body & gt; # flexbox-wrapper) – Norris 14 June 2013 в 13:41
  • 2
    Это правильный ответ, так как принятый ответ не будет расти по мере того, как контент будет больше, чем один экран. – SimplGy 21 June 2013 в 23:10
  • 3
    Большое вам спасибо, Angry Dan, что уродливое белое пространство внизу моего сайта пропало! – Boris Burkov 7 May 2014 в 16:37
  • 4
    Конечно, поскольку этот вопрос был задан, просмотр размеров порта стал Thing. Итак, теперь вы можете просто сделать body{min-height: 100vh} – Angry Dan 8 July 2015 в 15:39
  • 5
    Вам также нужно body { height: auto; } для прокрутки, чтобы они не отображались в FireFox. кроме этого, отлично работает. – Torxed 27 January 2016 в 14:09 
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Работает для всех основных браузеров: FF, Chrome, Opera, IE9 +. Работает с фоновыми изображениями и градиентами. Полосы прокрутки доступны в виде содержимого.

1
ответ дан Corni 21 August 2018 в 01:32
поделиться

Если вы хотите сохранить поля на теле и не хотите полос прокрутки, используйте следующий css: 

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Настройка body {min-height:100%} даст вам полосы прокрутки.

См. демонстрацию в http://jsbin.com/aCaDahEK/2/edit?html,output .

62
ответ дан dpatru 21 August 2018 в 01:32
поделиться
  • 1
    Спасибо за единственный рабочий ответ :) Я предполагаю, что «абсолютный» заставлял его работать – Dmitry Matveev 8 July 2014 в 11:14
  • 2
    Хорошо работает для меня в Firefox без полос прокрутки, спасибо. В принятом ответе нет. – Andrew 8 July 2015 в 08:00
  • 3
    @Andrew Как ни странно, это дает полосы прокрутки в FireFox. Однако вам необходимо принять height: auto; в предложении body, чтобы теперь появлялись полосы прокрутки. – Torxed 27 January 2016 в 14:08
  • 4
    @Torxed Я все еще получаю полосы прокрутки в FireFox с этим тоже. Добавление автоматической настройки к высоте не показалось мне полезным :( – Travis Crum 4 February 2016 в 21:25
  • 5
    Это не сработало для меня в Chrome 56.0.2924.87 (64-разрядная версия). – Ryan 7 March 2017 в 21:04

Здесь: 

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
4
ответ дан Eddie 21 August 2018 в 01:32
поделиться

Если вы не хотите работать с редактированием собственного CSS-файла и сами определяете правила высоты, наиболее типичные рамки CSS также решают эту проблему с помощью элемента body, заполняющего всю страницу, среди других вопросов, на

Например, Tacit CSS framework решает эту проблему из коробки, где вам не нужно определять какие-либо правила и классы CSS, а вы просто включите файл CSS в свой HTML.

1
ответ дан Filipe Freire 21 August 2018 в 01:32
поделиться

Вы также можете использовать JS, если необходимо 

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
3
ответ дан Herbs 21 August 2018 в 01:32
поделиться
  • 1
    Но для этого вам нужно добавить больше вещей, чем нужно, например, в библиотеку jQuery и писать на JavaScript, в то время как это можно сделать в CSS. – Front-end Developer 17 November 2017 в 00:21 
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
-1
ответ дан Imagine Breaker 21 August 2018 в 01:32
поделиться
  • 1
    Не могли бы вы объяснить, пожалуйста, какова возможная цель width: 100% для элементов body и html? Да, я понимаю, что с практической точки зрения body { margin: 0; } должно быть достаточно в большинстве случаев. Я просто хочу понять более подробно. – john c. j. 23 January 2017 в 18:45

Быстрое обновление 

html, body{
    min-height:100%;
    overflow:auto;
}

Лучшее решение с сегодняшним CSS 

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
8
ответ дан Jayant Varshney 21 August 2018 в 01:32
поделиться
  • 1
    Как это предлагает что-то другое по существующим ответам? – cimmanon 3 August 2015 в 23:05
  • 2
    Я тоже пробовал других, но не работал для меня. Это работало, так что это может быть решение кому-то нуждающемуся. @cimmanon – Jayant Varshney 4 August 2015 в 04:47
  • 3
    Это работает, спасибо! – Liran H 6 November 2017 в 18:15
  • 4
    Это единственное, что сработало для меня. Благодаря! – James 30 November 2017 в 23:11
  • 5
    – SkuraZZ 15 October 2018 в 06:36

О дополнительном пространстве внизу: ваша страница - приложение ASP.NET? Если это так, возможно, в вашей разметке есть почти все. Не забудьте также форматировать форму. Добавление overflow:hidden; в форму может удалить дополнительное пространство внизу.

148
ответ дан Josh Crozier 21 August 2018 в 01:32
поделиться
  • 1
    Я не рекомендую использовать переполнение: скрытый, если у вас нет действительно веской причины. Узнайте, почему вещи переполняются и настраиваются, поэтому они не будут переполняться – jontro 19 January 2015 в 15:37
  • 2
    Помимо того, что это мертво просто, хорошо, что мы применяем новые методы. – Pan Wangperawong 29 June 2015 в 20:07
  • 3
    @niaster, я определенно согласен. Поддержка браузера уже улучшилась с тех пор, как я опубликовал также этот ответ :) – Josh Crozier 29 June 2015 в 20:12
  • 4
    Теперь это станет принятым ответом. – incarnate 7 July 2015 в 09:37
  • 5
    Не уверен, почему нам нужно начинать «принятие новых практик». когда старая практика работает нормально. Нет никакого преимущества для этого: код не меньше и не работает лучше, и есть еще браузеры, которые не поддерживают vw / vh. – cimmanon 3 August 2015 в 23:02
  • 6
    не работает на мобильных устройствах ... – BentOnCoding 16 November 2015 в 17:41

Что я использую в начале буквально каждого используемого файла CSS: 

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

Поля 0 обеспечивают, браузера, чтобы иметь некоторое пространство слева или справа от них.

Заполнение 0 гарантирует, что элементы HTML и BODY не будут автоматически выталкивать все из них вниз или вправо из-за настроек браузера.

Варианты ширины и высоты установлены на 100%, чтобы гарантировать, что браузер не будет изменять их размер в ожидании фактического наличия заданного поля или заполнения, с минимальным и максимальным набором на случай, если какие-то странные, необъяснимые вещи происходит, хотя вы, вероятно, им не нужны.

Это решение также означает, что, как и в случае, когда я впервые начал работать с HTML и CSS несколько лет назад, вам не придется давать свой первый <div> margin:-8px;, чтобы он поместился в углу окна браузера.

Прежде чем я разместил сообщение, я посмотрел на свой другой проект в полноэкранном CSS и обнаружил, что все, что я использовал, было j ust body{margin:0;} и ничего больше, что отлично работало в течение двух лет, над которыми я работал над этим.

Надеюсь, что этот подробный ответ поможет, и я чувствую вашу боль. На мой взгляд, глупо, что браузеры должны установить невидимую границу слева, а иногда и верхнюю часть элементов body / html.

18
ответ дан MineAndCraft12 21 August 2018 в 01:32
поделиться
  • 1
    Не могли бы вы объяснить, пожалуйста, какова возможная цель width: 100% для элементов body и html? Да, я понимаю, что с практической точки зрения body { margin: 0; } должно быть достаточно в большинстве случаев. Я просто хочу понять более подробно. – john c. j. 23 January 2017 в 18:37 
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
25
ответ дан Mori 21 August 2018 в 01:32
поделиться

После тестирования различных сценариев я считаю, что это лучшее решение: 

html {
    width:100%;
    height: 100%;
    display: table;
}

body {
    width:100%;
    display:table-cell;
}

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

Это динамично, поскольку элемент html и body автоматически расширяется, если их содержимое переполняется. Я тестировал это в последней версии Firefox, Chrome и IE 11.

Посмотрите здесь полную скрипку (для вас там нет поклонников таблицы, вы всегда можете изменить ее для использования div):

https://jsfiddle.net/71yp4rh1/9/

С учетом сказанного, есть несколько проблем с ответами, размещенными здесь. 

html, body {
    height: 100%;
}

Использование вышеприведенного CSS приведет к тому, что html и элемент body НЕ будут автоматически расширяться, если их содержимое переполняется, как показано здесь:

https://jsfiddle.net/ 9vyy620m / 4 /

Как вы прокручиваете, обратите внимание на повторяющийся фон? Это происходит потому, что высота элемента тела НЕ увеличилась из-за переполнения его дочерней таблицы. Почему он не расширяется, как любой другой элемент блока? Я не уверен. Я думаю, что браузеры обрабатывают это неправильно. 

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Установка минимальной высоты 100% на тело, как показано выше, вызывает другие проблемы. Если вы это сделаете, вы не можете указать, что дочерний div или таблица занимает процентную высоту, как показано здесь:

https://jsfiddle.net/aq74v2v7/4/

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

16
ответ дан OwN 21 August 2018 в 01:32
поделиться
  • 1
    Я пробовал все высоко отозванные ответы на этой странице, но никто не работал. Это сделал! – Ryan 7 March 2017 в 21:31

Только с 1 строкой CSS ... Вы можете сделать это. 

body{ height: 100vh; }
2
ответ дан Sanjib Debnath 21 August 2018 в 01:32
поделиться

Попробуйте добавить: 

body {
height: 100vh;
}
1
ответ дан Shree 21 August 2018 в 01:32
поделиться

CSS3 имеет новый метод. 

 height:100vh

Он делает ViewPort на 100% равным высоте.

Таким образом, ваш код должен быть 

 body{
 height:100vh; 
 }
-2
ответ дан silvachathura 21 August 2018 в 01:32
поделиться

Пожалуйста, проверьте это: 

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

Или попробуйте новый метод Высота видового экрана: 

html, body { width: 100vw; height: 100vh;}

Видовой экран: если ваше окно просмотра использует любое содержимое экрана размера, оно будет иметь полную высоту для экран.

3
ответ дан ThomasThiebaud 21 August 2018 в 01:32
поделиться
  • 1
    Пожалуйста, включите объяснение своего решения, чтобы другие, которые нашли этот ответ, могли понять. Благодаря! – Shawn 26 October 2016 в 19:37
  • 2
    Привет, сэр, проверьте код, который мне дал объяснение .... – Ayyappan K 10 November 2016 в 22:57
  • 3
    Не могли бы вы объяснить, пожалуйста, какова возможная цель width: 100% для элементов body и html? – john c. j. 23 January 2017 в 19:08
  • 4
    поэтому давайте скажем, что у меня есть таблица с 50 столбцами и 1000 строк с числами от 1000 до 9999, что произойдет с ними, выйдут ли они за пределы окна, как обычно, или у них будет панель прокрутки типа переполнения – PirateApp 15 July 2018 в 07:48

все ответы на 100% правильны и хорошо объяснены, но я сделал что-то хорошее и очень просто, чтобы сделать его отзывчивым.

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

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

здесь JSfiddle Demo.

0
ответ дан wasimv09 21 August 2018 в 01:32
поделиться
155
ответ дан Josh Crozier 31 October 2018 в 20:43
поделиться