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

<分区>

需要一些帮助...

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

    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>

最佳答案

您的 CSS 没问题。问题是您的页眉和页脚高度为 0。

使用 clearfix 属性。引用网址: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>

关于html - 为什么我的 Css 代码不适用于我的 Html 页眉和页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34330657/

上一篇：javascript - 我不希望逗号后的空格固定宽度 - 最佳做法？

下一篇：css - ionic 条件文本颜色

相关文章：

html - CSS <div> 没有向下延伸整个页面

html - Bootstrap 网格，中间内容粘在页面顶部

html - ionic : how to change the size of FAB icon

javascript - 如何找到从json生成的html元素的id

html - 如何使这个嵌套的 div 显示在右上角并使文本环绕它？

html - 页面容器不以页面对齐中心问题为中心

html - div水平居中垂直居中

html - 在元素上应用 SVG css 过滤器会导致其可见性

html - 类型错误 : onEmailBlur is not a function

html - 使屏幕阅读器可以访问数据表以读取每行的列标题