CSS: my side bar overflow the container div's border when I set it's height to 100%
My side bar overflow the container div's border when I set it's height to 100%, I would like to know if there is any way I can have it's height 100% minus some px.
Here is the source开发者_高级运维:
<div id="main">
<br /><br />
<div class="content">
<div id="sidecontent">
<h1 id="title">Title</h1>
*****
</div>
<div id="sidebar">
<div class="sidebox">
****
</div>
</div>
</div>
<div class="bottom"></div>
</div>
#main {
position: relative;
background:transparent url('/public/images/main_bg.png') top left repeat-y;
padding:37px 37px 37px 37px;
margin-left: auto ;
margin-right: auto ;
width:940px;
min-height: 363px;
}
#main div.top, #main div.bottom {
height:70px;
width:1015px;
position: absolute;
left:0px;
}
#main div.content {
padding:0 15px 0 15px;
}
#sidecontent {
width: 675px;
}
#sidebar {
background: #fff url('/public/images/bg_side.png') top right repeat-y;
position: absolute;
height: 100%;
right:34px;
top:42px;
width: 200px;
padding: 10px 10px 0px 40px;
z-index:50;
}
.created_at {
color:gray;
}
.sidebox {
margin-bottom: 5px;
}
#main div.top {
top:-70px;
background: transparent url(/public/images/main_top.png) bottom no-repeat;
}
#main div.bottom {
bottom:-70px;
background: transparent url(/public/images/main_bottom.png) top no-repeat;
}
Try having a look at this article and see if you can follow that. It describes how to have two columns the same height using CSS techniques.
You should set a margin on it, or you can use padding for the surrounding div on it, if it's within a div.
Example within the container div:
margin-bottom: 5px;
Example within a div surrounding the container div:
padding-bottom: 5px;
Also, you can even place a div right after it in the html to push it up some, using margin-top.
I'm sorry, could you explain a bit better what you want to do again?
Maybe try this:
<head>
<style type="text/css">
#main {
position: relative;
background:transparent url('/public/images/main_bg.png') top left repeat-y;
padding:37px 37px 37px 37px;
margin-left: auto ;
margin-right: auto ;
width:940px;
min-height: 363px;
}
#main div.top, #main div.bottom {
height:70px;
width:1015px;
position: absolute;
left:0px;
}
#main div.content {
padding:0 15px 0 15px;
}
#sidecontent {
width: 675px;
}
#sidebar {
background: #fff url('/public/images/bg_side.png') top right repeat-y;
position: absolute;
height: 100%;
right:34px;
top:42px;
width: 200px;
padding: 10px 10px 0px 40px;
z-index:50;
}
.created_at {
color:gray;
}
.sidebox {
margin-bottom: 5px;
}
#main div.top {
top:-70px;
background: transparent url(/public/images/main_top.png) bottom no-repeat;
}
#main div.bottom {
background: transparent url(/public/images/main_bottom.png) top no-repeat;
}
</style>
</head>
<body>
<div id="main">
<br /><br />
<div class="content">
<div id="sidecontent">
<h1 id="title">Title</h1>
*****
</div>
<div id="sidebar">
<div class="sidebox">
Here is some content in the sidebox class div....
</div>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
Just removed the bottom: from the #main div.bottom css rule.
加载中,请稍侯......
精彩评论