Question

需要一些帮助...

在非常偷看的时刻，我必须明天完成这项工作，但我的CSS代码不适用于页眉和页脚，而相同的文件正在为其他事情工作，如字体系列，字体大小，正文背景颜色...

＆＃13;

    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;
    }

＆＃13;

    <!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>

＆＃13;

Answer 1

你的CSS很好。问题是你的页眉和页脚的高度为0。

使用mylibrary属性。参考网址：What is a clearfix?

＆＃13;

clearfix

＆＃13;

    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;
    }

＆＃13;

Answer 2

对页眉和页脚使用clearfix类

.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 */

Answer 3

使用明确修复或将浮动提供给页眉和页脚

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

为什么我的Css代码不能用于我的Html页眉和页脚？

3 个答案: