[place...">
All geek questions in one place

How to create div content after a fixed div header with dynamic height

following situation:

<body> <div style="position:fixed; width:100%">[place holder for header]</div> <div style="position:relative;width:100%;margin-top:100px">[content]</div> </body>

I need the title to always be visible at the top, so it should be with the position: fixed. The problem occurs after self-adjusting the height of the header. If the title is above 100 pixels, some of the content is hidden.

How can I (CSS) dynamically set the start position of the contents of a div relative to the end of the header.

+6
source share
2 answers

I'm still looking for a CSS-only solution, but for now, the idea is using only one line of JavaScript - when using jQuery:

Javascript

 $(document).ready(function () { $('#content').css('marginTop', $('#header').outerHeight(true) ); });

HTML

 <body> <div id="header" style="[…]">[place holder for header]</div> <div id="content" style="[…]">[content]</div> </body>

The advantage of using .outerHeight(true) is that it takes care of the borders and marks that you could apply to your header.

+7
source

A CSS-only solution (although not super clean) can display the same block twice: 1st block “position: fixed”, 2nd block “visibility: hidden”. Since both will have the same height, the role of the second block will be to shift the contents of the page to the appropriate level.

+6
source

Source: https://habr.com/ru/post/919455/

More articles:


All Articles