высота ширина в процентах css html некоторые странные вещи

У меня странная вещь с некоторым кодом css и html. Следующий код отлично работает при использовании его в браузере Chrome, firefox, но при использовании инструментов разработчика и insepect с мобильным видом не понимает, почему, но min-height: 100%; не применяется? включил скриншот. Значит, в обычном браузере отлично работает любая идея? Благодаря!высота ширина в процентах css html некоторые странные вещи

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
} 
 
* { 
 
    position: relative; 
 
} 
 
a, 
 
body, 
 
footer, 
 
header, 
 
h1, 
 
h2, 
 
html, 
 
img, 
 
li, 
 
p, 
 
section, 
 
span, 
 
sup, 
 
ul { 
 
    background: transparent; 
 
    border: 0; 
 
    font-size: 100%; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 0; 
 
    vertical-align: baseline; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    width: 210%; 
 
} 
 
body { 
 
    background: red; 
 
    color: #FFFFFF; 
 
    height: 100%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    width: 210%; 
 
} 
 
section { 
 
    display: block; 
 
    float: left; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.test { 
 
    float: left; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    width: 20%; 
 
}

<body> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
</body>

инструментов разработки скриншот из Chrome:

screenshoot

Как сделать его высоту 100% от средств разработки также?

Любая идея?

THX!

источник

2016-10-03 derder

Я думаю, что это связано с тем, что инструменты разработчика отбирают 100%, оставляя окно на 71% вместо 100%. – Keith

Вы не закрыли свой тег 'head' перед открытием' body'tag (есть второй тег с открывающейся головкой) – Johannes

не исправляет это: X и 100% -ное окно в инструментах Dev аналогичного результата. : \ – derder

Минимальная высота пересчитывается, когда вы открываете инструменты chrome dev inline. Если вы внимательно посмотрите на высоту части красной страницы, вы заметите, что ее высота равна той же высоте, что и окно инструментов разработчика. Откройте инструменты для разработчиков в виде отдельного окна и устраните проблему.

Другим решением является использование высоты видового экрана вместо процентов. Используйте 100vh вместо 100%

источник

2016-10-03 17:41:54

Спасибо! Он делает то же самое с 100vh, но с этим не отображает цвет фона. Это немного странно, почему так, но да, 100vh - это лучший вариант для этого. Но до сих пор не знаю, почему это не делает 100vh, потому что это означает 100% высоты видового экрана. : _ – derder

-1

Ваш первоначальный вопрос содержал </style><head><body> вместо </style></head><body> (обратите внимание на добавленный / до head).

Фиксация этого, вероятно, решит вашу проблему.

источник

2016-10-03 17:55:05

Это не так. :(Я буду счастлив, если это будет проблемой, но это не так: x – derder

высота ширина в процентах css html некоторые странные вещи

ответ

Смежные вопросы