How to avoid the sticky header and footer overlapping with the content in HTML and CSS?-CodePudding

I know this might be silly but I am facing this issue when I am trying to follow the semantic way. I need to have a sticky header and footer and the main content be scrollable. When I followed some tuts and trying to build on own, I am facing this issue and not able to come out of it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

header,
footer {
  position: fixed;
  width: 100%;
  min-height: 100%;
}

header {
  top: 0;
  bottom: auto;
}

footer {
  top: auto;
  bottom: 0;
}

main {
  position: relative;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Benazir Beauty</title>
  </head>
  <body>
    <header>Header</header>
    <main>
      Main
    </main>
    <footer>Footer</footer>
  </body>
</html>

CodePudding user response：

You can use flex and give the main block all the space not used by the footer and header.

html,
body {
  height: 100vh;
  margin: 0;
}

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background-color: #ddddff;
}

main {
  flex: 1;
  overflow: auto;
  background: #ddffdd;
}
 
main p {
  /* force a scroll */
  height: 8rem;
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <div >
    <header>Header</header>
    <main>
      Main
      <div> Some large content to scroll through!
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
      </div>
    </main>
    <footer>Footer</footer>
  </div>
</body>

bigger header/footer: bigger and some more

html,
body {
  height: 100vh;
  margin: 0;
}

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  align-self: center;
  font-size: 5rem;
}

footer {
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 2rem;
  font-size: 1.4rem;
}

header,
footer {
  background-color: #ddddff;
}

main {
  flex: 1;
  overflow: auto;
  background: #ddffdd;
}

main p {
  /* force a scroll */
  height: 8rem;
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <div >
    <header>Header</header>
    <main>
      Main
      <div> Some large content to scroll through!
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
      </div>
    </main>
    <footer>
      <div>Footer</div>
      <div>Copyright: none use me all day</div>
      <div>Joe was here</div>
    </footer>
  </div>
</body>

CodePudding user response：

Remove min-height: 100%; on header, footer.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

header,
footer {
  position: fixed;
  width: 100%;
}

header {
  top: 0;
  bottom: auto;
}

footer {
  top: auto;
  bottom: 0;
}

main {
  position: relative;
  margin-top: 1rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <header>Header</header>
  <main>
    Main
  </main>
  <footer>Footer</footer>
</body>

</html>

CodePudding user response：

You can probably go about it in 2 ways:

display: grid

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

body {
  height: 100vh;
  display: grid;
  grid-template: 200px auto 200px/auto;
}

header {
  background: red;
}

main {
  background: green;
  overflow-y: scroll;
}

footer {
  background: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <header>Header</header>
  <main>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat laoreet ipsum vitae semper. Vivamus eget nulla non velit congue malesuada. Nullam feugiat mi a scelerisque convallis. Phasellus viverra dui felis, ut laoreet dolor posuere eget.
    Praesent ac justo vitae est volutpat eleifend a nec velit. Maecenas ullamcorper, augue fermentum imperdiet malesuada, augue ex maximus tortor, sed malesuada sem ante in enim. Suspendisse potenti. Curabitur ut eros fringilla, tincidunt nunc in, fermentum
    turpis. Maecenas erat mi, lobortis vel rutrum at, pretium vel leo. Suspendisse sagittis gravida leo vel viverra. Vestibulum a malesuada arcu.
    <br> Proin eu congue magna. Integer id tincidunt ipsum, ac efficitur urna. Sed non facilisis metus, vitae vehicula leo. Nunc at vestibulum diam. Aenean egestas felis sed mi semper feugiat. Etiam diam velit, bibendum vel orci ut, sodales blandit dui.
    Maecenas in ultrices ipsum. Vivamus iaculis tincidunt est ut malesuada. Morbi bibendum tellus et risus accumsan, non condimentum turpis aliquam.
    <br> Praesent vulputate dictum hendrerit. Suspendisse urna risus, egestas id mollis pharetra, fringilla nec erat. In sem dui, volutpat vitae finibus eget, commodo luctus metus. Vestibulum sagittis turpis a lacus scelerisque, at elementum tellus finibus.
    Quisque non velit purus. Pellentesque eu lorem turpis. Duis ut massa odio. Proin interdum neque efficitur eleifend ornare. Etiam a placerat ipsum. Fusce vestibulum sit amet ex vel scelerisque. Sed eget efficitur lorem.
    <br> Ut condimentum, lorem placerat egestas dapibus, orci enim congue risus, a interdum odio nunc a eros. Donec lobortis libero quis diam molestie, non ultrices libero dictum. Donec tortor odio, ultricies vitae placerat id, viverra vulputate odio.
    Nullam mollis nisl vel turpis laoreet, et consectetur nisl vulputate. In rhoncus, massa non mollis lacinia, ipsum nibh hendrerit ante, vel fringilla urna tortor vitae est. Sed commodo nisi magna, vitae congue purus pellentesque ac. Praesent sed mollis
    dui. Quisque vel euismod arcu. Curabitur rutrum, justo non lobortis accumsan, mauris sem facilisis nulla, non condimentum diam odio at dolor. Aliquam erat volutpat. Donec ultrices sem viverra, laoreet neque eu, dignissim arcu. Etiam a interdum odio.
    In molestie, est eget ornare aliquet, quam mi egestas est, sit amet lacinia mauris augue eu ante. Nulla posuere placerat lorem.
    <br> Nullam sapien sapien, interdum a lorem ullamcorper, tempus tempor ipsum. Nam sollicitudin posuere dolor sit amet pretium. Aliquam cursus mollis ligula eget tempor. Pellentesque aliquet libero quis congue tincidunt. Suspendisse cursus molestie
    diam dapibus congue. Pellentesque et purus nec erat molestie bibendum. Ut et urna tempus, eleifend lacus eget, congue dui. Duis fermentum suscipit porta. Quisque sit amet dui euismod, scelerisque sem ut, aliquam nibh.
  </main>
  <footer>Footer</footer>
</body>

</html>

using view height

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

body {
  height: 100vh;
}

header {
  background: red;
  height: 30vh;
}

main {
  background: green;
  overflow-y: scroll;
  height: 40vh;
}

footer {
  background: blue;
  height: 30vh;
}