Comment créer une page dont on peut faire filer mais le header garde sa position ?

Asked Mar 10, 08:28 pm 22 Views Add Your Answer

abakarabdallah02

Asked Mar 10, 08:28 pm

Html Css Javascript

0 Dislikes

0 Comments

1 Answers

kabeer

Edited Mar 11, 11:33 am

Here's one way to achieve this using HTML and CSS:

Create a header that will hold header and container div, and create a container div that will hold the content of the page. Give it a class name for styling purposes.

Use CSS to make the container div scrollable but keep the header fixed in place. You can achieve this using position: fixed for the header, top: 0 to position it at the top of the screen.

html code

<!-- Header goes here -->
<header>...</header>

<div class="container">
  <!-- Page content goes here -->
  <p>Page content goes here.</p>
</div>

css code

body{
    margin: 0;
}

header {
  position: fixed; /* Fix the header in place */
  top: 0; /* Position the header at the top of the screen */
  width: 100%; /* Make the header span the full width of the container */
  background-color: #000; /* Optional: add a background color to the header */
  z-index: 1; /* Optional: set the z-index to 1 to ensure the header is always on top */
  
  height: 50px;
  color: #fff;
}

.container {
    background-color: #ccc;
    height: 800px;
    margin-top: 50px;
}

Run snippet

1 Likes 0 Dislikes

0 Comments