How Can I fix a header of a specified height in the top without adding top property to the sibling section to make it visible?
Question
I have a small problem, I am working on a project, in this project everything is separated literally, I am working only on a header section without touching anything else, I can how the header is displayed in all the project after deploying the header only, meaning? I don't have access to touch the body, only the heeader.
I have to set the Header to fixed, I was doing this before already but they were my personnal projects, I give the header a height and then the section next to it I positionate it relatively and add top property to it so the header and section can be both visible, the header does not have to cover the sectiion or part of it.
let's put some code:
<body>
<header></header>
<section class="first_section"></section>
<section></section>
</body>
and the css like that:
header { position :fixed; height: 40px; }
section { position : relative; }
.first_section { top: 40px }
Now, I can't do that, I can't touch the section or add style to them, why? because they are very dynamic, the header can be included in multiple sites, that means that it is not proper to touch all sections or cover them one by one.
So to fix this, I tried this in html:
<body>
<header>
<div class="header"></div>
</header>
<section class="first_section"></section>
<section></section>
</body>
Now, I have passed all the css properties from header to the div with header classname, and header now is like this:
header { position :relative; width: 100%; height: 40px; }
.header { position: fixed; // many others properties }
section { position : relative; }
.first_section { top: 40px }
But it is not working? why? I don't know, but when inspecting the height property in the header, it is not set, the header have width and height properties in css file, but when I Inspect I see that the height is 0, I think because it has a fixed child, but I don't know how to fix it.
Any help would be much appreciated.
2 answers
solution1
1 ACCPTED 2020-06-02 13:42:12
One solution could be to create 2 divs in your header: a fixed one with the real header, and another just to keep the space so nothing will be covered:
<header>
<div class="header trueHeader"></div>
<div class="header"></div>
</header>
and
.header {
height: 50px;
width: 100vw;
}
.trueHeader {
position: fixed;
background-color: #f00;
}
Example: https://jsfiddle.net/jhsLngr4/1/
solution2
0 2020-06-02 14:50:17
I know the answer has already been selected but a simple solution would be using position: sticky like so...
body { margin: 0; padding: 0; } header { position: sticky; top: 0; height: 50px; background-color: red; } section { height: 750px; background-color: white; } footer { height: 50px; background-color: green; }.someClass { padding: 10px; margin: 0; }
<header></header> <section> <p class="someClass"> scroll down.. </p> </section> <footer></footer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.