所以,我在布局上遇到了麻烦。我希望侧边栏达到内容高度的100%。我试过别人给过的伎俩,但他们没有工作。我不知道是不是因为我的页面布局略有不同或者是什么,但是是的......
代码:
<div id="page">
<div id="top">
<div id="topwidth">
this is a top bar
</div>
</div>
<div id="leftmenu">
this is a fixed floating menu to the left
</div>
<div id="wrapper">
<div id="maincontent">
<div class="post">
This is my content area. multiple post divs will be here
</div>
</div><!-- Main Content-->
<div id="sidebar">
Yep... this is where the trouble is; It won't go 100%.
</div> <!-- Sidebar -->
<div id="clearfix">
...I tried this.
</div>
</div> <!-- Wrapper -->
<div id="footer">
This is my footer, it's 100% the width of the page.
</div> <!-- Footer -->
</div> <!-- Page -->
和css:
* {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
cursor:default;
}
a {
transition: color 1s;
-moz-transition: color 1s; /* Firefox 4 */
-webkit-transition: color 1s; /* Safari and Chrome */
-o-transition: color 1s; /* Opera */
}
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
overflow-y: scroll;
}
#page {
width:100%;
display:block;
background-color:#FFF;
background-image: -moz-linear-gradient(left , #BCBCBC 0%, #FFFFFF 10%, #FFFFFF 90%, #BCBCBC 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #BCBCBC),
color-stop(0.1, #FFFFFF),
color-stop(0.9, #FFFFFF),
color-stop(1, #BCBCBC)
);
}
#top {
background-color:#6666ff;
border-bottom:1px solid #3333ff;
height:39px;
width:100%;
z-index:99;
position:fixed !important;
box-shadow:0px 5px 10px rgba(50, 50, 50, 0.5);
}
#wrapper {
margin:0px auto;
padding-top:50px;
width:950px;
text-align:center;
}
#leftmenu {
margin-left:-75px !important;
z-index:98;
height:100%;
width:75px;
text-align:center;
position:fixed;
border-right:15px solid #999fff;
display:block;
background-color:#FFF;
background-image: -moz-linear-gradient(left , #f5f5f5 0%, #f5f5f5 95%, #e5e5e5 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #e5e5e5),
color-stop(0.5, #f5f5f5),
color-stop(0.95, #f5f5f5),
color-stop(1, #e5e5e5)
);
background-repeat:no-repeat;
box-shadow:0px 0px 10px rgba(50, 50, 50, 0.5);
transition: margin-left 0.3s;
-moz-transition: margin-left 0.3s; /* Firefox 4 */
-webkit-transition: margin-left 0.3s; /* Safari and Chrome */
-o-transition: margin-left 0.3s; /* Opera */
}
#header:hover {
margin-left:0px !important;
}
#maincontent {
width:625px;
height:100%;
float:left;
position:relative;
}
#clearfix {
width:100%;
clear:both;
}
#sidebar {
width:300px;
height:100%;
margin-top:5px;
position:relative;
float:right;
}
#footer {
text-align:center;
clear:both;
height:100%;
width:100%;
padding-top:10px;
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0,rgba(255,255,255,0.001)),
color-stop(1,rgba(255,255,255,1))
);
}
答案 0 :(得分:0)
我认为这是你想要做的事情?
<强> CSS 强>:
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
a {
transition: color 1s;
-moz-transition: color 1s; /* Firefox 4 */
-webkit-transition: color 1s; /* Safari and Chrome */
-o-transition: color 1s; /* Opera */
}
html {
background-color: #FFF;
background-image: -moz-linear-gradient(left , #BCBCBC 0%, #FFFFFF 10%, #FFFFFF 90%, #BCBCBC 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #BCBCBC),
color-stop(0.1, #FFFFFF),
color-stop(0.9, #FFFFFF),
color-stop(1, #BCBCBC)
);
height: 100%;
width: 100%;
}
body {
height: 100%;
overflow-y: scroll;
position: relative;
width: 100%;
}
#footer {
background: #ccc;
clear: both;
min-height: 150px;
padding-top: 10px;
text-align: center;
}
#header {
background-color: #6666ff;
border-bottom: 1px solid #3333ff;
box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.5);
height:39px;
position:fixed;
width:100%;
z-index:99;
}
#leftmenu {
margin-left:-75px;
height:100%;
width:75px;
text-align:center;
position:fixed;
border-right:15px solid #999fff;
display:block;
background-color:#FFF;
background-image: -moz-linear-gradient(left , #f5f5f5 0%, #f5f5f5 95%, #e5e5e5 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #e5e5e5),
color-stop(0.5, #f5f5f5),
color-stop(0.95, #f5f5f5),
color-stop(1, #e5e5e5)
);
background-repeat:no-repeat;
box-shadow:0px 0px 10px rgba(50, 50, 50, 0.5);
transition: margin-left 0.3s;
-moz-transition: margin-left 0.3s; /* Firefox 4 */
-webkit-transition: margin-left 0.3s; /* Safari and Chrome */
-o-transition: margin-left 0.3s; /* Opera */
z-index:98;
}
#maincontent {
background: #ccc;
float: left;
position: relative;
width:950px;
}
#maincontent .post {
background: #eee;
width:625px;
}
#sidebar {
background: #f00;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 300px;
}
#wrapper {
height: 100%;
margin:0px auto;
padding-top:50px;
width:950px;
}
<div id="header">
HEADER
</div>
<div id="leftmenu">
this is a fixed floating menu to the left
</div>
<div id="wrapper">
<div id="maincontent">
<div class="post">
This is my content area. multiple post divs will be here
</div>
<div class="post">
This is my content area. multiple post divs will be here
</div>
<div class="post">
This is my content area. multiple post divs will be here
</div>
<div class="post">
This is my content area. multiple post divs will be here
</div>
<div class="post">
This is my content area. multiple post divs will be here
</div>
<div id="sidebar">
Yep... this is where the trouble is; It won't go 100%.
</div>
</div><!--maincontent-->
</div><!--wrapper-->
<div id="footer">
FOOTER
</div>