Блог

Главная - Вопросы по программированию - Почему этот пример css ведет себя таким образом?

Почему этот пример css ведет себя таким образом?

#html #css

#HTML #css

Вопрос:

Почему этот простой html / css ведет себя не так, как я ожидаю?

HTML

 <!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="site.css">
    </header>
    <body>
        <div id="file-explorer"></div>
        <div id="file-queue"></div>
    </body>
</html>

CSS

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

body {
    margin: 2rem;
    background-color:blue;
}

#file-explorer {
    height: 50vh;
    background-color: red;
}

#file-queue {
    height: 50vh;
    background-color: green;
}

Результат:

введите описание изображения здесь

Вопрос:

Прежде всего, я не понимаю, как тег body может получать параметр margin . Он не может вырасти за пределы области просмотра. Разве для тела не должно быть допустимо только заполнение?. Я использовал заполнение, но получаю тот же результат.

С другой стороны, я использую box-sizing = border-box . Итак, размер, который я предоставляю, должен содержать поля / отступы / границы. Поэтому, если я говорю, что хочу, чтобы мои два раздела занимали 50% области просмотра, почему я получаю результат больше, чем область просмотра (как вы можете видеть, отображается вертикальный блок прокрутки)?

Я ожидал, что у меня будет запас вокруг обоих разделов, и все они будут точно соответствовать области просмотра браузера.

Ответ №1:

вы не устанавливаете высоту и желаемый зазор так, как должны.

  • Используйте для height % процента, и он будет соответствовать заданному вами размеру окна ( vh/vw/vmin/vmax используются размеры области просмотра).
  • Используйте padding вместо margin этого, и он будет соответствовать заданному вами размеру поля ( padding и border будет включен в вычисление, если установлено значение border-box , а не margin ).

исправленный пример, если это вам поможет:

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

html {
  padding: 2rem;
  height: 100vh;/* vh here is okay */
  background-color: blue;
}

body {
  height: 100%;/* it will use the 100% of height avalaible inside the border and padding of the parent */
}

#file-explorer {
  height: 50%;/* half-height of the parent, not the viewport */
  background-color: red;
}

#file-queue {
  height: 50%;
  background-color: green;
} 
 <!DOCTYPE html>
<html>
<header>
  <link rel="stylesheet" href="site.css">
</header>

<body>
  <div id="file-explorer"></div>
  <div id="file-queue"></div>
</body>

</html>

Ответ №2:

Прежде всего, я не понимаю, как тег body может получать параметр margin . Он не может вырасти за пределы области просмотра. Разве для тела не должно быть допустимо только заполнение?. Я использовал заполнение, но получаю тот же результат.

тег body также является одним из тегов. Так и есть в теге html. тег body отображается на экране без какого-либо стиля. Когда он получает поле, тег body уменьшается на толщину, которая совпадает с размером поля.

С другой стороны, я использую box-sizing = border-box . Итак, размер, который я предоставляю, должен содержать поля / отступы / границы. Поэтому, если я говорю, что хочу, чтобы мои два раздела занимали 50% области просмотра, почему я получаю результат больше, чем область просмотра (как вы можете видеть, отображается вертикальный блок прокрутки)?

vh — относительная единица измерения. Когда ставки равны 100%, тогда нет места для маржи. Таким образом, поле должно быть в vh тоже, как в примере ниже.

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

body {    
    margin: 10vh;
    background-color:blue;
}

#file-explorer {
    height: 40vh;
    background-color: red;
}

#file-queue {
    height: 40vh;
    background-color: green;
} 
 <!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="site.css">
    </header>
    <body>     
        <div id="file-explorer"></div>
        <div id="file-queue"></div>
    </body>
</html>

Метки: