Click here to Skip to main content
14,982,989 members
Please Sign up or sign in to vote.
1.80/5 (2 votes)
See more:
HTML
<title>TITLE
            <h2>Title</h2>
        <p class="br"></p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
                <h2>TEXT</h2>
                <h3>text_2</h3>
                <p>
                   text text text text text 
                   text text text text text
                   text text text text text
                   text text text text text
                   text text text text text 
                </p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
            <h2>© Copyright Reserved</h2>


What I have tried:

CSS
body {
    background-color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    min-height: 100vh;
    position: relative;
}
*
{
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

header , footer {
    position: absolute;
    background-color: #696969;
    width: 100%;
    color: white;
}

header {
    height: 9vh;
    top:0;
    position: sticky;
    margin-bottom: 10px;
}

footer {
    height: 10vh;
    bottom:0;
    font-size: 10px;
    position:absolute;
}

header h2 {
    position: absolute;
    margin-top: 20px;
    left: 10%;
}

footer h2 {
    position: absolute;
    right: 3%;
}

article {
    background-color: #6e6363;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

article p{
    margin-top: 16px;
    line-height: 24px;
}

main {
    width: 90vw;
    margin: 0 auto;
    padding: 30px 20px;
    min-height: calc(100vh - 211px - 58px);
}

article:last-child {
    margin-bottom: 0;
}


article h3 {
    margin: 10px 0 25px 0;
}

.br {margin-bottom: 10em}

/*#header {
    position: fixed;
  }
  
  #content {
    margin-top: 100px;
  }

*/

p {
    padding-bottom: 5px;
}
Posted
Updated 13-Apr-21 9:10am
v2

1 solution

If I understand what you want then position:fixed should be used for the header.

If that is done, however the rest of the page may scroll, that element will remain fixed in its position. Something that would used, for example, labels for columns so as one scrolls the column header remains in place.

Note that you declare the CSS header class twice!
Once you have position:absolute and the other position:sticky

See here [^] for the difference between 'fixed' and 'sticky'
   
Comments
Антић Алекса 14-Apr-21 2:51am
   
Thank you it's working

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900