CSS Верхнее поле сжимается при уменьшении окна

StackOverflow https://stackoverflow.com/questions/1966899

  •  21-09-2019
  •  | 
  •  

Вопрос

Я хочу, чтобы верхнее поле для моей веб-страницы составляло, скажем, 100 пикселей, когда окно развернуто, но если пользователь изменяет размер окна, чтобы уменьшить его, я хочу, чтобы это поле уменьшилось.Поле должно иметь минимальный размер, скажем, 10 пикселей и должно уменьшаться пропорционально высоте окна.

Примером того, что я пытаюсь подражать, является http://www.bing.com/

Как мне реализовать это в CSS?я борюсь с min-height, min-width, height и width в данный момент.

Спасибо.

Это было полезно?

Решение

Не видя кода, сложно дать хорошее предложение.Но вы можете оформить HTML и тело так, чтобы они имели высоту 100%, что фактически должно соответствовать высоте видимой части браузера:

html, body{ margin:0; padding:0; height:100%; }

Оттуда вы можете добавить элемент div прямо в тело и задать ему высоту в процентах:

#push{ height: 15%; }

HTML-код вашего тела будет выглядеть примерно так:

<body>
    <div id="push"></div>
    <div>
        asdf asdf
    </div>
</body>

При изменении высоты тела изменится и высота толчка.Возможно, вам придется изменить это число, чтобы оно соответствовало вашему вкусу.Вы также можете указать минимальную высоту push, но это не поддерживается в IE6.Кроме того, этот 100% html/body может доставить вам проблемы позже в зависимости от того, как вы делаете свой нижний колонтитул и тому подобное, так что будьте осторожны и удачи.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top