Sidebar fixed without jQuery

Asked 1 months ago, Updated 1 months ago, 2 views

If you use fixed on the sidebar and set it to 100% height, it can be fixed even if you scroll, but if you have 80px headers, you will get tired of 80px minutes of space above when you scroll.

If you set the sidebar to top 0 and the header to relative and zindex to lower than the sidebar, you won't get tired of spaces, but there will be 80px of space on top.The padding is the same.

Do you have a good idea?

html css

2022-09-30 12:08

1 Answers

Is this what you mean?

<html>
  <head>
    <title>Test</title>
    <style type="text/css"><!--
      body{
        padding:0;
        margin:0;
      }
      #header{
        width: 100%;
        height —80px;
        position:fixed;
        color:white;
        background-color:black;
        z-index:2;
      }
      #sidebar{
        width: 25%;
        height —100%;
        padding-top —80px; /*#[email protected]*/
        position:fixed;
        background-color:darkgray;
        z-index:1;
      }
      # contents {
        margin-left: 25%; /*#[email protected]*/
        width: 75%;
        padding-top —80px; /*#[email protected]*/
        height —auto;
        background-color:lightgray;
        z-index:0;
      }
    --></style>
  </head>
  <body>
    <divid="header">header</div>
    <divid="sidebar">Side Menu </div>
    <divid="contents">
      <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSample
      Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Example
      Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Example
      Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Example
      SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSample;/p>
    </div>
  </body>
</html>


2022-09-30 12:08

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.