Здравствуйте, стеки,
Я занимаюсь разработкой сайта, и у меня возникла небольшая "проблема". Это не так важно, сайт работает, но это всего лишь одна из тех раздражающих вещей, о которых вы продолжаете чесать голову снова и снова.
Я пытаюсь смешать статическую высоту с динамической высотой.
Пример:
HTML:
< HTML >
< BODY >
< DIV class="header_with_menu" >
< /DIV >
< DIV class="main_content" >
< /BODY >
< /HTML >
CSS:
body{ margin: 0; padding 0;
width: 100%; height: 100%; }
.header_with_menu {display: block; margin-left: 100%; margin-right: 100%; height: 160px; }
.main_content {display: block; margin-left: 100%; margin-right: 100%; height: 80% }
Как видите, ничего особенного. Я использую пользовательский javascript полосы прокрутки на main_content.
Он работает нормально, пока я не начну завинчиваться с высотой окна Firefox (или любого другого браузера).
Что я ожидаю: когда я уменьшу и уменьшу окно firefox, main_container будет становиться все меньше и меньше, но останется внутри окна firefox (поскольку его высота является динамической, она просто будет корректироваться, потому что она классная) 1017 *
Что происходит: высота main_container в конечном итоге застревает на определенной высоте, которую я не указываю, и содержимое начинает исчезать из поля зрения в нижней части окна браузера.
Я хочу, чтобы main_content оставался внутри экрана и автоматически адаптировался к высоте окна браузера.
Как мне это сделать?
Это раздражает, когда у вас монитор меньшего размера, высотой всего 768 пикселей и выходящий за пределы прокручиваемой области примерно на 10 пикселей ... И хуже всего то, что я не могу заставить его вести себя самостоятельно. Я пытался сделать вещи абсолютными, они просто перекрывают друг друга и теперь так и останавливают, потому что они и абсолютные, и вне нормального потока. Я попытался поэкспериментировать с максимальной и минимальной высотой в процентах для заголовка и только контейнера ... не сработало. Искал javascript для автоматической навигации по процентам высоты или максимальной высоты моего css, не получилось слишком хорошо ...
По сути, я щадил это уже два дня, и я просто недостаточно изобретателен, чтобы найти какое-то решение.
Есть ли для этого чисто css-решение?
(PS Я сейчас использую 77% высоты для main_content, поскольку это, кажется, идеальная граница: не слишком маленькая для 1920x1080 и не слишком большая, поэтому контент начнет исчезать при 1440x900. 78% заставят контент начать исчезать и ниже 75% просто делает его уродливым в 1920x1080.)