Почему ТЕЛО не соблюдает минимальную высоту: 100%? - PullRequest
Новая
       50

Почему ТЕЛО не соблюдает минимальную высоту: 100%?

0 голосов
/ 07 октября 2019

Я пытаюсь на всю жизнь сделать простую страницу с контейнером, который тянется до дна. Желаемый результат:

  1. #Main, по крайней мере, такой же высоты, как окно просмотра, но может растянуться дальше, если контент будет добавлен.
  2. body, по крайней мере, такой же высоты, как иобласть просмотра, но может увеличиваться при добавлении контента.
  3. html по меньшей мере такой же высоты, как и область просмотра, но может увеличиваться при добавлении контента.

Я не знаюНе знаю, почему это кажется невозможным. Я пробовал каждую комбинацию роста, минимальной высоты и т. Д., Но все они так или иначе терпят неудачу. Есть что-то в <body>, где min-height не работает.

Вот скрипка: https://jsfiddle.net/r51tvu2b/

Обратите внимание, что body не соблюдает объявление min-height: 100%. Я сейчас раздражен за гранью воображения.

Примечание: я нашел решения, которые "работают", но при добавлении контента body остается на 100% высоты области просмотра, что не является желаемым результатом. То есть в моей скрипке красная линия должна доходить до нижней части области просмотра, а если содержимое длиннее, до нижней части содержимого.

Ответы [ 4 ]

2 голосов
/ 07 октября 2019

Я сделал 2 небольших изменения в CSS, и я думаю, что он делает то, что вы хотите сейчас. check Фрагмент кода 

html {
  position: relative;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  background: gray;
  margin: 0;
  padding: 0;
  /* changed here */
  min-height: 100vh;
  border-bottom: 3px solid red;
}
#Main {
  /* changed here */
  min-height: 100vh;
  width: 50%;
  margin: 0px auto;
  background: white;
}
<div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>

Надеюсь, это поможет.

0 голосов
/ 07 октября 2019

Вы можете использовать этот код 

html {
            height:100%
        } 
        body {
            min-height:100%;
            position: relative;
            background: gray;
            margin: 0;
            padding: 0;
            border-bottom: 3px solid red;
        }
        #Main {
            height: 100%;
            width: 50%;
            margin: 0px auto;
            background: white;
        }
<div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
    Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
    big content.
    </div>
    </div>
0 голосов
/ 07 октября 2019

Я нашел способ для этого работать с помощью flexbox, который имеет почти универсальную поддержку. Похоже, что при установке HTML равным display: flex; min-height: 100%, flexbox будет как минимум размером окна просмотра. Body, ребенок flexbox, будет «растягиваться», чтобы соответствовать высоте flexbox. Если содержимое body выше окна просмотра, это приведет к росту флексбокса html.

Я до сих пор не знаю, почему min-height: 100% на body не работает, так какПри проверке документ HTML явно имеет высоту. Я попытался установить фактическую высоту и получил больше результатов, которые не имеют смысла - например, body будет таким же высоким, как и окно просмотра, но #Main не будет таким же высоким, как body, несмотря на то, что height: 100% -- как это возможно?

Также не имеет смысла, что фон body выходит за пределы фактического содержимого самого тела.

Я остановлю свой пост сейчас, потому что есть толькостолько BS, что я могу взять, прежде чем я начну писать всю напыщенную речь о том, насколько ужасен CSS. 

html {
  min-height: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}
body {
  flex-grow: 1;
  background: gray;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid red;
}
#Main {
  height: 100%;
  width: 50%;
  margin: 0px auto;
  background: white;
}
<div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>
0 голосов
/ 07 октября 2019 

html {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  background: gray;
  border-bottom: 3px solid red;
}
#Main {
  min-height: 100vh;
  width: 50%;
  margin: 0px auto;
  background: white;
}
<body>
  <div id="Main">
    I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
    <hr>
    Let's review:
    <br>HTML is min-height: 100% -- it's as least as tall as the viewport.
    <br>BODY is min-height: 100% -- it's as least as tall as HTML.
    <br>*I* am height: 100% -- WHY AM I NOT TALL
    <hr>
    Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
    <hr>
    One more thing, when my contents grow, so should the body.
    <button onclick="document.getElementById('content').style.display='block';">
      Click me to add content.
    </button>
    <div id="content" style="height: 600px; background: green; display: none;">
      big content.
    </div>
  </div>
</body>

Я считаю, что вы должны использовать 100vh, что означает 100% высоты области просмотра.

...