Что происходит, когда вы применяете маржу к проценту CSS?

Скажем, у меня есть следующие:Что происходит, когда вы применяете маржу к проценту CSS?

html, body { height: 100%; } 
<div style="height:80%;margin-top:10px;">test</div>

Как изменить размер экрана, он поддерживает соотношение 80% до определенной точки, то он распадается и перестает быть 80% от высоты экрана. Что именно происходит за кулисами?

источник

2014-04-06 Allison A

Это относительно сложная проблема, называемая «размер коробки».

Там фантастический читать об этом, что ответит вам вопрос на CSS-уловок: http://css-tricks.com/international-box-sizing-awareness-day/

В сущности, то, что происходит в вашем случае, является то, что маржа-топ имеет преимущество. Когда у вас есть 50 пикселей общей высоты, 10 удаляются и 80% из 50 будет 40 - достаточно. Сделайте это меньше и 80% вместо этого будут «все, что осталось»

источник

2014-04-06 20:56:01

Если вы используете%, вы должны установить минимальный размер.

Примерная ширина: 80%; мин-ширина: 1200 пикселей;

Когда вы увеличиваете или уменьшаете экран размером 1200 пикселей, он фиксирует элементы и 1200 пикселей, не нарушая экран, как это происходит с вами.

Надеется, что это помогает = D

источник

2014-04-06 20:56:31 Dexxtz

Ор говорит о высоте. –

```
html { height: 100%; } 
```
делает <html> имеет полную высоту окна.
```
body { height: 100%; } 
```
делает <body> иметь 100% высоты <html>. Обратите внимание, что некоторые браузеры используют
```
body { margin: 8px; } 
```
в по умолчанию таблицы стилей, поэтому <body> переполнится окно, потому что те, запас не входит в height: 100%.
```
div { height:80%; margin-top:10px; } 
```
делает <div> имеют высоту <html> 80%, и добавляет 10px верхнего края (дополнительный к высоте).

Если вы хотите, чтобы эти 10px быть включены в 80%, вы можете использовать calc():

div { height:calc(80%-10px); margin-top:10px; }

или использовать box-sizing с padding вместо margin:

div { height:80%; padding-top:10px; box-sizing: border-box; }

источник

2014-04-06 20:59:17 Oriol

Я бы добавил, что даже без 'body {margin: 8px}', '' будет переполняться из-за исходного поля в большинстве браузеров. –

@Zakariadza Вот что я говорю: 'body {margin: 8px; } '- это поле по умолчанию для' '(в Firefox). – Oriol

oops, я не заметил этого предложения :) –

Что происходит, когда вы применяете маржу к проценту CSS?

ответ

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