При установке высоты 100vh страница отображается более чем в два раза больше размера экрана по вертикали - PullRequest
Новая
       4

При установке высоты 100vh страница отображается более чем в два раза больше размера экрана по вертикали

0 голосов
/ 02 февраля 2019

У меня есть этот очень простой код.Насколько я понимаю, установка высоты 100vh для тела должна вместить все, что внутри видимого экрана, но когда я запускаю его, страница появляется более чем в два раза больше видимого экрана.Я должен установить высоту тела 40-50vh, чтобы вместить все внутри видимого экрана.Я использую последний Chrome на экране 1366x768.Я знаю, что мне здесь не хватает чего-то очень простого.Заранее спасибо за помощь. 

<!DOCTYPE html>
<html>
<head>
<style>

body {
    height: 100vh;
    max-height: 100vh;
}

textarea { 
    width: 100%; 
    height: 100%;
}

</style>
</head>
<body>

<textarea></textarea>

<textarea></textarea>

<button>POST</button>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Вы устанавливаете textarea height на 100%, поэтому он принимает 100% + 100% + высоту кнопки - это более чем в два раза!Измените textarea height на auto, чтобы он занимал только необходимый сок. 

body {
  height: 100vh;
  max-height: 100vh;
}
textarea { 
  width: 100%; 
  height: auto;
}
<textarea></textarea>
<textarea></textarea>
<button>POST</button>
0 голосов
/ 02 февраля 2019

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

<!DOCTYPE html>
<html>
<head>
<style>

body {
    height: 100vh;
    max-height: 100vh;
    border:5px solid red;
}

textarea { 
    width: 100%; 
    height: 100%;
}

</style>
</head>
<body>

<textarea></textarea>

<textarea></textarea>

<button>POST</button>

</body>
</html>

Так что измените высоту текстовой области на 48%, чтобы вы могли по-прежнему помещать туда кнопку поста.

...