css-container 边框应该是全屏答案

【问题标题】：css-container border should be take full screencss-container 边框应该是全屏
【发布时间】：2012-04-10 12:28:55
【问题描述】：

我有一个非常简单的要求。无论浏览器屏幕是什么，我都需要左右边框应该继续。即顶部和底部应该保持白色，但左右应该是黑色。总之最终结果应该像下图 http://s13.postimage.org/uuy4fobxj/border.jpg

这是我的代码：

<html>
<head>
<style type="text/css">
body {
    text-align: center;
    background-color: #FAFAFA;
    font-family: Verdana,Helvetica,sans-serif,Arial;
    height: 100%!important;
    }
#container {
    background-color: #FFFFFF;
    border-bottom: 0 none;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    margin: 0 auto !important;
    min-height: 100%;
    padding: 0;
    width: 978px !important;
    overflow:auto;
}   
</style>
</head>
<body>
<div id ="container">
</div>
</body>
<html>

【问题讨论】：

标签： html css

【解决方案1】：

我认为您正在寻找 Web 开发中相当普遍的事情，即在页面上居中显示内容，对吗？这对我有用...

<html>
<head>
<style type="text/css">
html,body
{
margin:0;
padding:0;
}

body {
    text-align: center;
    background-color: #000;
    font-family: Verdana,Helvetica,sans-serif,Arial;
    height: 100%!important;
    }
#container {
    background-color: #FFFFFF;
    margin: 0 auto !important;
    min-height: 100%;
    padding: 0;
    width: 978px !important;
    overflow:auto;
}   
</style>
</head>
<body>
<div id ="container">
</div>
</body>
<html>

【讨论】：

如果容器内有浮动元素会不会一样？
我在类似设计中使用的容器中使用浮动，它工作正常。花车应该尊重容器。
你能快速检查一下 ojs.monojitbanerjee.co.cc 并告诉我吗？

【解决方案2】：

我认为您的 !important 声明与您的规则有冲突，这对我有用：

body, html {
    margin:0;
    padding:0;
    height:100%;
    background-color:#FAFAFA;
    text-align:center;
}

#container {
    background-color: #FFFFFF;
    height:100%;
    height: auto !important;
    min-height:100%;
    width:978px;
    margin:0 auto;
    border-left:1px solid #CCC;
    border-right:1px solid #CCC;
    overflow:auto;
}

【讨论】：