Why My Css Code Is Not Working For My Html Header And Footer? [closed]

问题

Need Some Help...

Stucked At Very Peek Moment, I Have To Complete This Work By Tomorrow But My CSS Code Is Not Working For Header And Footer, Whereas The Same File Is Working For Other Things Like Font-Family, Font-Size, Body Background Color...

    body {
	    font-family: Arial;
 	    font-size: 15px;
 	    line-height: 1.6em;
        background-color: linen;
    }

    .container {
	    border: 2px solid black;
  	    width: 70%;
 	    margin: 20px auto;
	    overflow: auto;
    }

    .Pull-Left {
	    Float: Left;
    }

    .Pull-Right {
	    Float: Right;
    }

    header {
	    background-color: blue;
    }

    footer {
	    background-color: blue;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <title>ABCD</title>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
    </head>
    <body>
    <div class="container">
    <header>
	<div class="Pull-Left">This Is The Main Title</div>
	<div class="Pull-Right">***Some Text***</div>
	</header>

	  </br></br></br></br></br></br></br></br>
	  </br></br></br></br></br></br></br></br>
	  </br></br></br></br></br></br></br></br>

    <footer>
	<div  class="Pull-Left">This Is The Footer</div>
    </footer>
	
    </div><!--Container-->
	
    </body>
    </html>

回答1:

Your css is fine. The Problem is that your header and footer have 0 height.

Use clearfix Property. Reference URL: What is a clearfix?

    body {
    font-family: Arial;
    font-size: 15px;
    line-height: 1.6em;
    background-color: linen;
    }
    
    .container {
    border: 2px solid black;
    width: 70%;
    margin: 20px auto;
    overflow: auto;
    }
    
    .Pull-Left {
    Float: Left;
    }
    
    .Pull-Right {
    Float: Right;
    }
    
    header {
    background-color: blue;
    }
    
    footer {
    background-color: blue;
    }
    
    .cf:after {
      content: "";
      display: table;
      clear: both;
    }

   <!DOCTYPE html>
    <html>
    <head>
    <title>ABCD</title>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
    </head>
    <body>
    <div class="container">
    <header class="cf">
    <div class="Pull-Left">This Is The Main Title</div>
    <div class="Pull-Right">***Some Text***</div>
    </header>
    
      </br></br></br></br></br></br></br></br>
      </br></br></br></br></br></br></br></br>
      </br></br></br></br></br></br></br></br>
    
    <footer class="cf">
    <div  class="Pull-Left">This Is The Footer</div>
    </footer>
    
    </div><!--Container-->
    
    </body>
    </html>

回答2:

use clearfix class to the header and footer

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
} 
.clearfix { display: inline-block; } /* start commented backslash hack \*/
* html .clearfix { height: 1%; } 
.clearfix { display: block; } /* close commented backslash hack */

回答3:

use clear fix or give float to the header and footer like

header,footer{
  float:left;
  width:100%;
}

来源：https://stackoverflow.com/questions/34330657/why-my-css-code-is-not-working-for-my-html-header-and-footer

标签

html

css

html5

css3