Одним из решений является использование немного JavaScript для захвата высоты заголовка при загрузке страницы, а затем использования его для установки верхнего края обертки содержимого под ним. Небольшой пример, который я создал, помогает проиллюстрировать это решение.
HTML (упрощенно):
<div id="header">
<!-- Header links go in here -->
</div>
<div id="wrapper">
<!-- Content goes in here -->
</div>
JavaScript:
// Only fires when document is loaded, attaching callback to window
window.onload = function(){
// Gets element with id "header", and stores its height in variable
var headerH = document.getElementById("header").offsetHeight;
// Uses height to set margin-top of the content wrapper, which has id "wrapper"
document.getElementById("wrapper").style.marginTop = headerH + "px";
};
Теперь, даже если заголовок перерывы в несколько строк на узком экране, содержание под ним не будет быть закрытым, потому что у него будет достаточно верхнего края, чтобы подтолкнуть его ниже нижней части заголовка.
Код JSFiddle demonstration приведенного выше кода с небольшим количеством дополнительного контента/CSS. Попробуйте изменить размер панели результатов до тех пор, пока ссылки заголовка не перейдут на несколько строк (и не скроют верхнюю часть страницы), а затем нажмите «Выполнить» - содержимое должно быть полностью видимым снова.
Надеюсь, это поможет! Дайте мне знать, если у вас есть какие-либо вопросы по этому поводу.
Простейшее решение, о котором я могу думать, имеет фрагмент кода JavaScript, который захватывает высоту фиксированного заголовка на загрузке страницы, а затем устанавливает верхнее поле основной оболочки ниже этого значения. В результате все содержимое ниже будет видно, несмотря на переменную высоту заголовка. (Дайте мне знать, если вам понадобится предоставить пример реализации.) – Serlite
Привет, я новичок в Javascript и HTML, вы думаете, что можете привести пример? Я очень ценю это. – user3088477
Несомненно, я добавлю это как ответ ниже. Дайте мне несколько минут, чтобы настроить его. – Serlite