Как я могу создать фиксированную верхнюю панель с изменяющейся высотой в CSS?

Я хотел бы иметь фиксированную меню в верхней части моего веб-сайта. (который не перемещается при прокрутке). Моя проблема заключается в том, что эта строка меню может иметь переменную высоту (один или два (или более) уровня в зависимости от количества элементов/размера экрана)

Поскольку верхнее меню исправлено, я должен добавить margin-top для моего "реального" контента после этого (или он начнет скрываться в меню), но поскольку высота меню является переменной, я не могу установить margin- Вверх.

Итак, можно ли "заставить" контент не находиться под моей книжной шкалой? Как я могу это сделать? (Я не хочу использовать javascript для этого короля позиционирования)

Вот код, который я использую для тестирования решения:

<div id="page">

 <div id="mainmenu">
 <p id="lastUpdate">Last Update : this date</p><ul id="yw0">
 <li><a href="." target="_blank">Accueil</a></li>
 <li><a href="." target="_blank">Rapports</a></li>
 <li><a href="." target="_blank">Rapports personnalisés</a></li>
 <li><a href="." target="_blank">Rapports instantannés</a></li>
 </ul>

 </div><!-- mainmenu -->

 <div id="content">
 <div id="contentbox">
 HELLO WORLD
 </div>
 </div><!-- content -->

</div><!-- page -->

Спасибо !

2 ответа

Я думаю, что вы ищете медиа-запросы:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Вы можете применять стили CSS в зависимости от размера экрана.


Я не думаю, что вы можете сделать это только в CSS, поскольку он не способен обнаруживать изменения на странице. Как указано ниже, вы можете найти что-то рядом с тем, что хотите, используя css padding, но я бы заподозрил, что он не будет именно тем, что вы хотите. Это одна из вещей, для которой предназначен JavaScript. Ид счастливо доказать, что

licensed under cc by-sa 3.0 with attribution.