我有一个居中的css布局,有100%的高度。一切看起来都很好,除了我需要左右两边的边框,背景图片,也必须延伸到100%的页面高度。
我尝试了很多不同的选择,但似乎无法解决这个问题。
请看一下我的代码,让我知道我能做什么。请记住,除了右栏和左栏之外的所有内容都是按我需要的位置放置的。
左右列是leftbdr和rightbdr。
<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>
