CSS 将内部样式表移动到外部时效果不一样

Question

我设计了一个布局，您可以看到 here，具有固定的 header、固定的菜单栏、按两列排列的框内内容、页脚以及围绕整个 <body> 元素。它完全符合我的要求（使用 Iceweasel 38.2 和 Internet Explorer 11 测试）。

问题是：当我尝试将样式 sheet 移动到外部 css 文件时，它不再起作用了。结果看起来像 this。

我不明白为什么页面的外观会发生变化，因为样式和 html 完全一样。外部 CSS 不包含标签。

这是工作页面的来源css/html：

<style>

  body    {
      height: 100%;
      color: black;
      background: white;
      border-width: 4px;
      border-style: solid;
      border-color: black;
      padding: 0;
      margin: 0 auto;
      max-width:1024px;
      }

  #left {       
      margin:0;
      margin-right: -4px;
      margin-top: 183px;
      padding:0;
      float:left;
      width:65%;
      background:red; 
      }

  #right {    
      margin:0;
      padding:0;
      margin-top: 183px;
      float:right;
      width:calc(35% + 4px);
      left: -4px;
      background:blue;
      }


  .boxleft { 
      padding-bottom: 10px;
      padding-left:20px;
      padding-right:20px;
      border-style: solid;
      border-color:black;
      border-top-width:0px;
      border-left-width:0px;
      border-right-width:4px;
      border-bottom-width:4px; 
      float:left;
      width:calc(100% - 44px); 
      }

  .title {      
      background-color:blue;   
      color:white;
      } 

  .rating {     
      background-color:red;  
      color:white;
      }

  .boxright {    
      padding:20px;
      border-style: solid;
      border-color:black;
      border-top-width:0px;
      border-left-width:4px;
      border-right-width:0px;
      border-bottom-width:4px; 
      float:right;
      width:calc(100% - 44px); 
      }

  .poster {     
      background-color:green;    
      color:white;
      } 

  #header { 
      background-image:url('Title background03.png');  
      background-repeat: no-repeat;
      position:fixed;
      width: 100%;
      max-width:1024px;
      margin: 0px auto;
      height:119px;
      top: 0;
      } 


  #footer { 
      background:white; 
      position:fixed;
      width:100%; 
      max-width:1024px;
      bottom: 0;
      padding: 0px;
      border-top-style: solid;
      border-bottom-style: solid;
      border-color:black;
      border-top-width:4px;
      border-bottom-width:4px;
      } 

  #menu {       
      background:black; 
      position:fixed;
      color:white;
      width:100%; 
      max-width:calc(1024px - 24px);             
      z-index:200;  
      margin: 0px auto;
      top:115px;
      height:64px;
      padding-top:12px;
      padding-left:24px;
      /* z-index: 1; */
      }

</style>    



<!DOCTYPE html>
<html>
  <head>       
  </head>

  <body>

<div id="header">
</div>

<p id="menu">menu1 - menu2 - menu3</p>
<div id="left">
  <div class="title boxleft">
    <p>title</p>
  </div>
  <div class="rating boxleft">
    <p>rating</p>
  </div>
</div>
<div id="right">
  <div class="poster boxright">
    <p>poster</p>
  </div>
</div>

<div id="footer">
  <P>copyright</P>
</div>  
  </body>

</html>

Answer 1

把这个加到你的头上

<link rel="stylesheet" type="text/css" href="style.css">

style.css 是您的外部 css 文件的名称

已编辑：对于边框未占据整个页面的问题，请尝试：

html {
    height: 100%;
}

顺便说一句

CSS 将内部样式表移动到外部时效果不一样

CSS doesn't work the same when moving internal stylesheet to external

css

height

border

external

internal