Попытка выяснить, как компенсировать высоту, при установке жатки в фиксированное положение. Обратите внимание, что заголовки содержат как верхнюю панель, так и навигацию. Добавлена некоторая непрозрачность в фрагмент кода для лучшей наглядности.
Мне нужно использовать сетку CSS, так как приведенный ниже код будет частью финансового отчета, поэтому очень важно, чтобы все, что касается макета, было точно на позиции как и планировалось.
То, что я пробовал:
Добавлен маржинальный верх: 180 пикселей как для block_1, так и для block_2.
Результат:
Оба текста в block_1 и block_2 поднимаются вверх страницы и позиционируются как складывающиеся под заголовками.
Требуемый результат:
block_1 и block_2 никогда не должны размещать свой текст под заголовками.
.wrapper {
display: grid;
grid-template:
"headers" 180px
"content" 2000px
/ 1fr;
}
.headers {
display: grid;
grid-template:
"top_bar" 100px
"navigation" 80px
/ 1fr;
}
.content {
display: grid;
grid-template:
"block_1" 1200px
"block_2" 1200px
/ 1fr;
}
.headers {
grid-area: headers;
position: fixed;
width: 100%;
opacity: 0.5;
}
.top_bar {
grid-area: top_bar;
background-color: black;
color: white;
padding: 10px 0 0 10px;
font-size: 150%;
}
.navigation {
grid-area: navigation;
padding: 10px 0 0 10px;
background-color: lightgrey;
}
.content {
grid-area: content;
background-color: pink;
}
.block_1 {
grid-area: block_1;
margin-top: 180px;
}
.block_2 {
grid-area: block_2;
margin-top: 180px;
}
<div class="wrapper">
<div class="headers">
<div class="top_bar">Header</div>
<div class="navigation">
<li><a href="#block_1">Block_1</a></li>
<li><a href="#block_2">Block_2</a></li>
</div>
</div>
<div class="content">
<div class="block_1" id="block_1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellendus eaque, commodi ea quisquam illum aperiam libero repudiandae, ex laboriosam sunt aspernatur voluptatum voluptate laborum recusandae. Recusandae perspiciatis molestiae dolorem dolore deleniti quisquam accusantium obcaecati. Deserunt illo nisi obcaecati facere ex illum hic consequatur? Repudiandae quod alias asperiores quas exercitationem officiis et nulla consequatur deserunt modi possimus veritatis minus vitae, veniam, iste ducimus sunt reiciendis saepe rerum? Quidem et atque ducimus eos cum, repudiandae, distinctio facere dignissimos fugiat voluptatibus, quae quam. Magni unde, delectus placeat commodi similique ipsam obcaecati iste laboriosam, autem numquam impedit explicabo omnis quo consequuntur tenetur doloribus error eveniet accusamus dolorem, quibusdam non reprehenderit! Unde illum sequi minima accusamus, iure, magni ipsam illo eius vitae, aut error voluptatem autem harum. Ea possimus autem numquam suscipit quasi facere similique quas, veritatis, at officiis neque odio consequuntur quia esse pariatur alias necessitatibus mollitia laboriosam, voluptas nam amet beatae eius! Cupiditate facere voluptatibus minus voluptas suscipit debitis, quae illo officiis enim saepe placeat rerum ut, sapiente dolore deleniti possimus, doloribus animi quo porro sint? Possimus natus laboriosam vel quas et. Voluptatem dolor a omnis neque, praesentium quas voluptates laudantium molestiae aliquam blanditiis esse natus nostrum deleniti quae, corporis delectus aliquid maiores sit et fuga atque odio. Placeat dicta esse, aspernatur dignissimos molestias hic facere consectetur quia veniam ratione iusto cupiditate dolorum suscipit non neque in magni dolorem nam odit perferendis similique labore! Doloribus et officia ad sed aspernatur minima quo quod omnis! Adipisci consequuntur, impedit in vel ratione, repellat dolor cupiditate. Quod nobis, dicta cumque eius illum. Sed eius eos similique soluta obcaecati nihil sunt. Harum, facilis magni. Quod totam soluta consectetur delectus nihil quas eveniet dolores ratione autem numquam quos suscipit animi similique eum nam voluptate illum debitis voluptates tenetur optio, alias inventore! Iure sapiente, earum. Rem, corporis officia.
</div>
<div class="block_2" id="block_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate doloribus nesciunt quisquam nemo magnam facere voluptatum temporibus, voluptas rem. In voluptatem adipisci consequuntur rerum dolor sequi labore provident! Porro nesciunt expedita unde esse, illum animi eum molestias cupiditate provident, officia doloremque libero ipsum vel quod mollitia ab itaque quibusdam ex nihil quaerat. Nam veniam dolore recusandae dicta nisi odio voluptates porro nobis quam necessitatibus iusto alias, vero eligendi atque qui quis autem soluta quasi aperiam, excepturi saepe vitae eum eos, ab praesentium. Vitae suscipit eos quo. Consectetur dignissimos beatae odio quos, quidem, enim quo autem expedita sunt, deleniti quam blanditiis aspernatur quia non modi minus eveniet maiores corporis minima molestiae ipsa tempore eius vitae! Officiis suscipit dignissimos molestiae expedita, veniam nulla quis id consectetur fuga optio! Quis commodi excepturi quo perspiciatis nostrum impedit non nihil praesentium fugiat, odit, voluptate perferendis dolore architecto illum ipsum unde eligendi consectetur numquam sint inventore sit quibusdam! Voluptatibus quaerat amet ad fugiat error repellat dolorem, autem eos repellendus harum pariatur esse rem mollitia temporibus fuga, laborum numquam alias voluptas porro soluta reiciendis ipsum commodi! Dignissimos ratione consequatur nobis quam, adipisci magnam quasi repudiandae. Cumque qui fuga, nemo, tempore vero architecto deserunt perferendis nihil quibusdam optio autem, velit ipsum. Tempora commodi est eum. Ea adipisci, maiores quo aut. Dignissimos aut eligendi repudiandae dolores, distinctio excepturi tempore blanditiis voluptatibus autem. Repudiandae nam eius, ullam quam. Reprehenderit minus omnis sint, inventore fuga quisquam, iusto est quae, facilis deleniti beatae dignissimos. Consequuntur nostrum possimus facilis dolorem, molestiae delectus facere, rem ipsum, adipisci, explicabo vitae itaque. Nemo maxime ex sunt, mollitia dolore consequuntur odio numquam possimus deleniti ab nihil quis laborum, accusamus, iste vel et quae eum! Ullam quae non sit rerum vel, itaque fuga hic eum, expedita sequi, nihil ab facilis aut? Excepturi officia reprehenderit dignissimos, cupiditate sit obcaecati!
</div>
</div>