Content is going under Header and Footer-CodePudding

The content between header and footer is going under them. I've tried setting flex-start and flex-end to header and footer but they don't go to the absolute top. They are stacked above and below the content.

The style of the header is

.Header {
  width: 100%;
  position: absolute;
  top: 0;
  flex-wrap: wrap;
}

The style of the Footer is

.Footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  flex-wrap: wrap;
}

The style of the content(if it helps) is

.Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

CodePudding user response：

Absolutely-positioned elements are taken out of the normal flow of the document.

You can either add margins to the top and bottom of the content to add space for the header and footer, or switch to using "sticky" positioning.

.Header {
  position: sticky;
  top: 0;
}
.Footer {
  position: sticky;
  bottom: 0;
}

CodePudding user response：

Your header is using position: absolute so its out of flow. Use position: relative or add a top padding/margin with the height of your header for your content.

.header {
  width: 100%;
  position: absolute;
  top: 0;
  flex-wrap: wrap;
  background: #707070;
  height: 100px;
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  flex-wrap: wrap;
  background: #e9e;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: blue;
  margin-top: 100px;
  
}

<body>
  <div >
    <h1>Header</h1>
  </div>
  <div >
    <h2>Content</h2>
  </div>
  <div >
    <h2>Footer</h2>
  </div>
</body>

CodePudding user response：

try this demo

HTML

<body>
  <div >Header</div>
  <div >Content</div>
  <div >Footer</div>
</body>

CSS

body{
  margin:0;
  padding:0;
  }

.Content {
  background-color:red;
  height:90vh;
  width: 100vw;
}

.Footer {
  background-color:green;
  width: 100vw;
  bottom: 0;
    height:5vh
}

.Header {
  background-color:blue;
  width: 100vw;
  top: 0;
  height:5vh
}

for more information about The position Property visit : https://www.w3schools.com/css/css_positioning.asp

CodePudding user response：

you can give top and bottom padding to the content equal to the height of header and footer

.Content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 40px;
padding-bottom:40px ;
overflow-y:auto;
}