CSS Относительный размер верхнего / нижнего колонтитула

Question

Я не эксперт по CSS, поэтому я могу упустить что-то очевидное. Я пытаюсь установить относительный размер верхнего и нижнего колонтитула (чтобы на больших мониторах верхний и нижний колонтитулы были больше, чем на меньших экранах). Для этого я использую процентную высоту. Однако это работает, только если я установил position на absolute. Проблема в том, что его установка в абсолют означает, что он перекрывает основную часть экрана (между верхним и нижним колонтитулом). Установка его в относительный не работает, так как он основан на элементах, находящихся внутри верхнего / нижнего колонтитула. Вот как выглядит мой заголовок:

.header
{
    position:absolute;
    top:0px;
    background-color:white;
    width:100%;

    height:30%;

}

Страница ASPX просто содержит

<div class="header"></div>

Есть ли способ получить относительно пропорциональные верхние и нижние колонтитулы?

Спасибо

Answer 1

Чтобы элементы имели высоту в процентах, вам нужно определить HTML и BODY, чтобы иметь также определенную высоту.Поскольку вы не знаете, что это такое, используйте 100%.

html, body {
    height:100%;
}

Answer 2

Чтобы использовать процентную высоту, родитель должен иметь фиксированную высоту, потому что если родитель имеет высоту auto, то это будет зависеть от высоты дочернего содержимого .... которое зависит от родительской высоты и т. Д. чтобы установить абсолютную позицию, он принимает вид экрана как родительский элемент, который имеет фиксированный размер (теоретически я), поэтому он работает с абсолютной.

Я не считаю хорошей идеей пытаться делать пропорциональные верхний и нижний колонтитулы в зависимости от разрешения браузера. Это действительно не имеет особого смысла для меня, честно говоря, вам нужно попытаться увеличить и уменьшить размеры шрифта или изображения, которые у вас есть в заголовке, чтобы соответствовать и т.д. Если вы действительно хотите, я бы предложил другой CSS таблицы стилей, которые могут выбрать пользователи (или выбирается автоматически с помощью javascript). Таким образом, если кто-то имеет огромное разрешение, он может выбрать большее, если он хочет (или его автоматически выбирают для них). Таким образом, вам не придется иметь дело с какими-либо проблемами масштабирования.