Процент заполнения не складывая общую высоту правильно

Так у меня есть страница с html, header, body, div теги и т.д. Для CSS, у меня есть:Процент заполнения не складывая общую высоту правильно

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    width: 98%; 
 
    height: 98%; 
 
    padding: 1%; 
 
}

Мой вопрос есть ли полоса прокрутки в правой части браузера. Слишком высокая высота?

html установлен на 100% высота и ширина. У body есть дополнение 1%, которое добавляет 1% вверху, справа, внизу и слева, так что это width - 2 = 98 и height - 2 = 98.

И обивка 1% высота 98%, а также ширина 98%. Как мне получить полосу прокрутки?

источник

2015-12-24 SebastianZdroana

Это интересно! Это также произойдет, если вы добавите 'box-sizing: border-box;' to 'body'? – Johannes

@Johannes не знаю, что делает размер окна, но я исправил его, выполнив то, что сказал Джош, используйте vh и vw – SebastianZdroana

Он не работает должным образом, потому что процентное соотношение padding относительно ширины элемента. Если вы измените размер браузера так, чтобы высота была больше ширины, вы заметите, что полоса прокрутки уходит (потому что padding относится к ширине).

В соответствии со спецификацией:

8 Box model - 8.4 Padding properties:

Процент рассчитывается относительно ширины содержащего сгенерированного блока, даже для «отступа верхом» и «обивка дна». Если ширина этого блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1.

Возможным Обходной использовать окно просмотра-процентных единиц, таких как vw для того, чтобы процент по отношению к ширине:

body { 
    width: 98%; 
    height: 98%; 
    padding: 1vh 1vw; 
}

Вы также можете добавить box-sizing: border-box включить padding в размеры элемента:

body { 
    width: 100%; 
    height: 100%; 
    padding: 1%; 
    box-sizing: border-box; 
}

источник

2015-12-24 02:51:31

вам действительно нужно определить ширину и высоту, если вы добавите размер окна? –

Я вижу спасибо, это было странно, потому что здравый смысл подсказывает вам, что установка html на 100% w/h устанавливает html, чтобы он соответствовал всему экрану, тогда, если вы установите тело с отступом на 1%, это займет 1% w/h из html и добавляет его в качестве дополнения к телу и дает тело 98% w/h заполняет для остальной части страницы. – SebastianZdroana

Также помните, что тело поставляется с 8px поля из коробки. –

в CSS, процентная маржа и обивка является относительно ширины контейнера, так как Джош Крозьер имеет alrea dy объяснил это в своем ответе.

Я предлагаю установить процентное дополнение на элементе <html>, корень документа, плюс box-sizing: border-box; вместе, он дает вам равное пространство вокруг.

border-box Длина и проценты значения ширины и высоты (и соответствующих мин/макс) на свойства этого элемента определяют границы окна элемента. То есть любая прокладка или граница, указанная на , элемент выложен и нарисован внутри этой указанной ширины и высоты . Ширина и высота содержимого рассчитываются путем вычитания границы и ширины заполнения соответствующих сторон из заданных значений ширины и высоты .- W3C

html { 
 
    background: silver; 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    padding: 5%; 
 
} 
 
body { 
 
    background: pink; 
 
    height: 100%; 
 
    margin: 0; 
 
}

источник

2015-12-24 03:29:12 Stickers

Что делает размер окна точно, я читаю на w3s, что он говорит браузеру, что свойства калибровки, однако, я не совсем понимаю, что я имею в виду – SebastianZdroana

В принципе, что делает 'border-box' - элемент будет придерживаться установленных вами' width' и 'height', независимо от значений' padding' и 'border'. – Stickers

Процент заполнения не складывая общую высоту правильно

ответ

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