How do I let the border of the footer take the full width of the screen?

advertisements

Hello i would like to know how can i let the border of the footer take the full width of the screen and also to get full width background on the footer, thanks in advance. :)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <link rel="stylesheet" href="css/first.css">
</head>
<body>
<div id="header">

</div>

<div class="footer">
<p>This is the Footer</p>
</div>

</body>
</html>

#header {

background-color:#99283c ;
margin: 0px;
height: 90px;

}

body{

    background-color: yellow;
    margin: 0px;

}

.footer  p{

    margin-top:38%;
    margin-left: 45%;
    border-top: 1px solid black;
    padding-top: 10px;
    max-width: 100%;

}


I suggest you do like this.

Here I created a container and made the children (header, content, footer) flex items. Doing so make it very easy to control your layout.

html, body{
  height: 100%;
  margin: 0px;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.header {
  background-color:#99283c ;
  height: 90px;
}
.content {
  flex: 1;                   /* content fill up space left */
  background-color: yellow;
}
.footer {
  border-top: 1px solid black;
  background-color: red;
}
<div class="container">

  <div class="header">
    <p>This is the Header</p>
  </div>

  <div class="content">
    <p>This is the Content</p>
  </div>

  <div class="footer">
    <p>This is the Footer</p>
  </div>

</div>