css свойство высоты не работает для элемента body - PullRequest
Новая
       1

css свойство высоты не работает для элемента body

0 голосов
/ 17 июня 2020

Этот код работает нормально 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html {
            width: 100%;
            height: 100%;
            background-color: red;
            margin: 0px;
            padding: 0px;
        }
        body {
        background-color: chartreuse;
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        }    
        </style>
    <title>Document</title>
</head>
<body>
</body>
</html>

enter image description here

, но тогда этот код не работает, когда я пытаюсь добавить маржу 5% с каждой стороны тело .... почему есть вертикальная полоса прокрутки .... высота 90% + 2 * 5% маржа = 100% высота, но есть полоса прокрутки .... я думаю, когда высота тела 100%, тогда не будет полоса прокрутки присутствует 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html {
            width: 100%;
            height: 100%;
            background-color: red;
            margin: 0px;
            padding: 0px;
        }
        body {
        background-color: chartreuse;
        width: 90%;
        height: 90%;
        padding: 0px;
        margin: 5%;
        }    
        </style>
    <title>Document</title>
</head>
<body>
</body>
</html>

enter image description here

1 Ответ

1 голос
/ 17 июня 2020

Попробуйте это. Может быть, это укажет вам верное направление 

<style>
html, body {
  height: 100%; /* keep these full height to avoid push or pull */
  margin: 0; /* remove default margin on body */
}
body {
  background-color: red; /* your background color */
}
#page {
  width: 90vw; /* use 90/100 of view width */
  height: 90vh; /* use 90/100 of view height */
  /* top margin 5/100 of view height + auto margin on left/right */
  margin: 5vh auto 0 auto; 
  background-color: chartreuse; /* your background color */
}
</style>

<body>
  <div id="page">
    <!-- here your content in the #page container -->
  </div>
</body
...