CODEWITHSUNDEEP
css
Anton Danylchenko
Anton Danylchenko

Reputation: 2358

CSS: position = fixed and height = auto

I have a page with fixed position of header on scroll. Similar as on StackOverflow top menu.

I need use height = auto because I can show information in single or multiple lines. If I have used two or more lines than my header is shown over the main text of page.

I can solve this with JS script by set body margin-top = header width.

How I can solve this situation only on CSS without JS?

Upvotes: 4

Views: 7367

Answers (1)

socha23
socha23

Reputation: 10239

I don't think it can be done purely with CSS. Elements with position: fixed are taken out of normal page flow, and so they are not used in calculating position of other elements on page.

I suppose you could render two headers, one with position: fixed, and other one without such declaration (and maybe with 'active' page elements, like links, input fields or buttons replaced with static text), used only to move other page elements down. That would be a terrible hack, though.

Upvotes: 1

Related Questions