Html 需要帮助以100%的高度向css布局添加左栏和右栏吗
我有一个css布局是居中的，有100%的高度。一切看起来都很好，除了我需要在左边和右边的边界，与背景图像，这也必须扩大到100%的页面高度 我已经尝试了很多不同的选择，但似乎无法解决这个问题 请看一下我的代码，让我知道我能做什么。请记住，除了左右列之外，其他所有列都是按我的需要定位的 左侧和右侧列是leftbdr和rightbdr 谢谢你的帮助Html 需要帮助以100%的高度向css布局添加左栏和右栏吗,html,css,Html,Css,我有一个css布局是居中的，有100%的高度。一切看起来都很好，除了我需要在左边和右边的边界，与背景图像，这也必须扩大到100%的页面高度 我已经尝试了很多不同的选择，但似乎无法解决这个问题 请看一下我的代码，让我知道我能做什么。请记住，除了左右列之外，其他所有列都是按我的需要定位的 左侧和右侧列是leftbdr和rightbdr 谢谢你的帮助 <head> <meta http-equiv="Content-Type" content="text/html; charset
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tmp Site Mockup</title>
<!-- <link rel="stylesheet" type="text/css" href="assets/css/core2.css" /> -->
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#E7E7E7 url(assets/img/bg.gif) repeat-x top;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:#9C090C;
}
p {
line-height:1.5;
margin:0 0 1em;
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:974px;
background:#F2F8FB;;
height:auto !important; /* all other browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* all other browsers */
}
#leftbdr{
width:49px;
float:left;
position:relative;
background:url(assets/img/lftSideShadow.jpg) repeat-y right top;
}
#rightbdr{
width:11px;
float:right;
position:relative;
background:url(assets/img/rgtSideShadow.jpg) repeat-y top;
}
#header {
height:22px;
padding-top: 4px;
padding-right: 27px;
border: 1px solid #6B0100;
background-color:#CE0200;
color:#FFFFFF;
text-align: right;
}
#header p {
font-family: Tahoma, arial;
font-size:11px;
margin:0;
}
#subheader {
height:122px;
border-bottom:2px solid #B3B3B3;
background-color: white;
}
#welcome {
height:31px;
border-top:1px solid white;
border-bottom:1px solid white;
background-color: #C20F00;
}
#topnav {
height:62px;
background:#B1B1B1 url(assets/img/topNavBG.jpg) no-repeat left top;
}
#topnav p{
text-align:right;
padding-right:22px;
font-size:10px;
color:#333;
}
#content {
padding:1em 1em 5em; /* bottom padding for footer */
background:#F2F8FB;
}
#content p {
text-align:justify;
padding:0 1em;
}
#footer {
position:absolute;
height:72px;
width:100%;
bottom:0; /* stick to bottom */
background:#9C090C url(assets/img/footerBG.gif) repeat-x;
color:white;
}
#footer p.left {
float: left;
padding-left:15px;
padding-top:7px;
}
#footer p.right {
float: right;
padding-right:15px;
padding-top:7px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbdr" > </div>
<div id="header">
Home | Website.com | My Site | Logout
</div>
<div id="subheader">
</div>
<div id="welcome">
</div>
<div id="topnav">
<p><input name="radiobutton" type="radio" value="radiobutton" />All <input name="radiobutton" type="radio" value="radiobutton" />Documents <input name="radiobutton" type="radio" value="radiobutton" />People <input name="radiobutton" type="radio" value="radiobutton" />Google</p>
</div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque arcu eget massa laoreet sit amet eleifend sapien accumsan. Sed ut tellus augue. Phasellus non blandit sem. Aliquam consequat ipsum rhoncus augue vehicula suscipit. Nunc laoreet gravida magna nec sodales. Cras quis lorem erat. Suspendisse eu urna in lorem placerat venenatis. Curabitur sed turpis in nulla convallis blandit. Donec ut tortor libero. Donec ante eros, facilisis vitae dictum eu, ornare nec libero. Nulla turpis purus, eleifend ac porta adipiscing, adipiscing non odio.
</p>
<h2>Vestibulum eu purus</h2>
<p>
Vestibulum eu purus ut enim eleifend sodales vel a purus. Aenean at orci dolor. Sed suscipit lorem nec est venenatis rutrum. Maecenas tempor, mi ac molestie suscipit, augue diam ultricies nibh, sit amet faucibus nulla leo vel nunc. Integer magna est, egestas nec placerat vel, pulvinar sed erat. Sed blandit ligula ac sapien venenatis rutrum. Aenean nec velit ut neque pharetra lobortis. Sed vulputate, ante ut euismod semper, nisi ante viverra ipsum, ac malesuada tellus nibh in tellus. Proin non velit ligula, eget egestas sapien. Curabitur ut viverra leo. Suspendisse pellentesque mauris lectus. Aenean sed arcu eleifend tortor cursus dapibus id in turpis. Nullam neque purus, congue id consectetur ut, dignissim id dolor. Praesent vehicula arcu vitae tellus lobortis mollis. Sed nec dapibus orci.
</p>
<h2>Maecenas faucibus sapien</h2>
<p>
Vestibulum at nibh nec elit pulvinar feugiat vel et erat. Maecenas faucibus sapien at enim dictum pharetra ac et augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor consequat auctor. Phasellus eu nibh nulla. Donec tempor scelerisque sodales. Fusce id neque quam. Cras sollicitudin dictum nisi, eu facilisis velit sodales quis. Aenean tempus congue erat in consequat. Curabitur odio ipsum, luctus sit amet accumsan quis, consequat nec elit. Nunc tristique nunc eget metus placerat vitae consequat erat tempus.
</p>
<p> </p>
</div>
<div id="footer">
<p class="left">
2010 Company Name, Inc. All Rights Reserved.<br />
<span style="color:#CCCCCC;">For internal use only by Company employees. Please do not disturibute.</span>
</p>
<p class="right">
Company Home | My Site | Log Out
</p>
</div>
<div id="rightbdr" > </div>
</div>
</body>
Tmp现场模型
html，正文{
保证金：0；
填充：0；
高度：100%；/*容器最小高度需要*/
背景：#e7e7e7url（assets/img/bg.gif）repeat-x top；
字体系列：arial，无衬线；
字体大小：小；
颜色：#666；
}
h1{
字体：1.5em格鲁吉亚，衬线；
保证金：0.5em0；
}
氢{
字体：1.25em格鲁吉亚，衬线；
边缘：0.5em；
}
h1，h2，a{
颜色：#9C090C；
}
p{
线高：1.5；
边缘：0.01米；
}
#容器{
位置：相对；/*页脚定位需要*/
边距：0自动；/*居中，不在IE5中*/
宽度：974px；
背景：#F2F8FB；；
高度：自动！重要；/*所有其他浏览器*/
高度：100%；/*IE6：视为最小高度*/
最小高度：100%；/*所有其他浏览器*/
}
#左BDR{
宽度：49px；
浮动：左；
位置：相对位置；
背景：url（assets/img/lftSideShadow.jpg）在右上方重复-y；
}
#右BDR{
宽度：11px；
浮动：对；
位置：相对位置；
背景：url（assets/img/rgtSideShadow.jpg）repeat-y top；
}
#标题{
高度：22px；
垫面：4px；
右边填充：27px；
边框：1px实心#6B0100；
背景色：#CE0200；
颜色：#FFFFFF；
文本对齐：右对齐；
}
#标题p{
字体系列：Tahoma，arial；
字体大小：11px；
保证金：0；
}
#副标题{
高度：122px；
边框底部：2个实心#B3；
背景色：白色；
}
#欢迎光临{
高度：31px；
边框顶部：1px纯白；
边框底部：1px纯白；
背景色：#C20F00；
}
#顶置导航{
高度：62px；
背景：#b1b1b1url（assets/img/topNavBG.jpg）不重复左上方；
}
#topnav p{
文本对齐：右对齐；
右边填充：22px；
字体大小：10px；
颜色：#333；
}
#内容{
填充：1em 1em 5em；/*页脚底部填充*/
背景#F2F8FB；
}
#内容p{
文本对齐：对齐；
填充：0.1em；
}
#页脚{
位置：绝对位置；
高度：72px；
宽度：100%；
底部：0；/*粘到底部*/
背景：#9C090C url（assets/img/footerBG.gif）repeat-x；
颜色：白色；
}
#页脚左{
浮动：左；
左侧填充：15px；
填充顶部：7px；
}
#页脚右{
浮动：对；
右侧填充：15px；
填充顶部：7px；
}
Home | Website.com |我的网站|注销
所有的文件都是谷歌的
同侧阴唇
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。我告诉你奥古斯。Phasellus非blandit扫描电镜。同卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵异卵。Nunc laoreet孕妇麦格纳nec苏打水。这是我的梦想。维尼纳提斯洛雷姆广场的欧盟乌尔纳吊牌。库拉比图尔·塞德·图尔皮斯（Curabitur sed turpis）在康瓦利斯·布兰迪特（nulla convallis blandit）河里。不要吃玉米饼或自由。做一个爱的人，做一个爱的人，做一个爱的人，做一个自由的人。无塔皮斯河，无塔皮斯河，无塔皮斯河，无塔皮斯河。
丘脑前庭
前庭是一个完整的门廊，它是一个完整的门廊。奥奇多洛的埃尼安。这是威尼斯的一种传统。我是临时的，我是专业的，我是专业的，我是专业的。整型大气压，无需安装，枕向安装。罗汉果。这是一个非常重要的问题。这是一个很好的例子，它是一个很好的例子。非丝绒舌苔中的Proin，eget egestas sapien。库拉比图尔·维韦拉·利奥。佩伦特斯·莫里斯·莱克托斯。在turpis中，埃尼亚人用弓箭射杀了一条长着大头的龟。这是我的荣幸，我是圣人，我是多洛的贵人。软叶生命弧的存在。这是我的梦想。
梅塞纳斯·福西布斯·萨皮恩
尼布·内克（nibh nec elit pulvinar feugiat vel et erat）的前庭。《法雷特拉法典》和《奥古斯都法典》中的大师福西布斯·萨皮恩。Lorem ipsum dolor sit amet，是一位杰出的献身者。在porttitor Consequeat拍卖行。Phasellus eu nibh nulla。不要在索达莱斯做临时权杖。我是内克·夸姆。这是一个非常重要的问题，欧盟的设施是最基本的。在康塞奎特有一种冰。同侧腕关节炎，是一种慢性疾病。这是一种特殊的生活方式。
2010公司名称，股份有限公司。保留所有权利。
仅供公司员工内部使用。请不要吹毛求疵。
公司主页|我的网站|注销
#容器背景边框例如，
repeat-yleftbdrrightbdr