CSS 格式，边框不会全长

Question

我知道这个问题已经在很多地方得到解决，但是我修改的模板有点古怪，我相信我知道是什么导致了这个问题。我只是不知道该怎么做才能解决它。

模板将 left 和 right borders 设置为 200px。我认为它需要做的是再制作 2 列而不是那么大的边框。我希望页面两侧的部分灰线一直向下，但它们没有。我知道这是因为内容并没有一直下去，但对于我的生活来说，我不知道该怎么办。我应该从头开始吗？

我提前为页面质量道歉，它只是在其中包含随机信息来保留位置。

页面链接 Site

#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
} 
#banner {
    text-align: right;
    background-color: #E39A2D;
    padding: 0px;
    margin: 0px;
    color: #ffffff;
}


/ here is where it goes a little wrong*/
#outer{ 
border-left: solid 200px #E39A2D; 
border-right: solid 200px #E39A2D;
background-color: #ffffff;  
height:100%;
} 

#inner{margin:0; width:100%; height:100%; } 
#left {
 width:200px; 
 float:left; 
 position:relative; 
 margin-left:-200px; 
 margin-right:1px;
 border-left:2px solid #564b47;
  height:inherit;
  }
 #right {
 width:200px; 
 float:right; 
 position:relative; 
 margin-right:-200px; 
 margin-left:1px;
 border-right:2px solid #564b47;
 height:inherit;

  }
#content{ 
position: relative; 
margin: 0px; 
height:150%;
}

我并不想把它写成我知道该怎么做的整页长度。我只是想将线条一直延伸到左侧和右侧。

提前致谢。

Answer 1

您要编辑的边框是来自#outer div 的边框:

#outer{ 
border-left: solid 200px #564B47; 
border-right: solid 200px #564B47;
} 

无论如何，您的代码看起来有点奇怪，使用边框进行布局不是正确的做法，而且会给您带来问题。检查一下:http://www.barelyfitz.com/screencast/html-training/css/positioning/