我一直在撞墙,试图弄清楚这个问题并认为它必须是我想念的小东西.我在网上搜索过,但我发现的任何东西似乎都没有用.HTML是:
<body>
<div id="header">
<div id="bannerleft">
</div>
<div id="bannerright">
<div id="WebLinks">
<span>Web Links:</span>
<ul>
<li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
</ul>
</div>
</div>
</div>
<div id="Sidebar">
<div id="SidebarBottom">
</div>
</div>
<div id="NavigationContainer">
<ul id="Navigation">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<div id="Main">
<!-- content -->
</div>
</body>
我的完整CSS是:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri, Sans-Serif;
height: 100%;
}
#header {
width: 100%;
z-index: 1;
height: 340px;
background-image: url("../../Content/images/bannercenter.gif");
background-repeat: repeat-x;
}
#header #bannerleft {
float: left;
background-image: url("../../Content/images/bannerleft.gif");
background-repeat: no-repeat;
height: 340px;
width: 439px;
z-index: 2;
}
#bannerright {
float: right;
background-image: url("../../Content/images/bannerright.gif");
background-repeat: no-repeat;
width: 382px;
height: 340px;
background-color: White;
z-index: 2;
}
#Sidebar {
width: 180px;
background: url("../../Content/images/Sidebar.png") repeat-y;
z-index: 2;
height: 100%;
position: absolute;
}
#SidebarBottom {
margin-left: 33px;
height: 100%;
background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}
#NavigationContainer {
position: absolute;
top: 350px;
width: 100%;
background-color: #bbc4c3;
height: 29px;
z-index: 1;
left: 0px;
}
#Navigation {
margin-left: 190px;
font-family: Calibri, Sans-Serif;
}
#Navigation li {
float: left;
list-style: none;
padding-right: 3%;
padding-top: 6px;
font-size: 100%;
}
#Navigation a:link, a:active, a:visited {
color: #012235;
text-decoration: none;
font-weight: 500;
}
#Navigation a:hover {
color: White;
}
#WebLinks {
float: right;
color: #00324b;
margin-top: 50px;
width: 375px;
}
#WebLinks span {
float: left;
margin-right: 7px;
margin-left: 21px;
font-size: 10pt;
margin-top: 8px;
font-family: Helvetica;
}
#WebLinks ul li {
float: left;
padding-right: 7px;
list-style: none;
}
#WebLinks ul li a {
text-decoration: none;
font-size: 8pt;
color: #00324b;
font-weight: normal;
}
#WebLinks ul li a img {
border-style: none;
}
#WebLinks ul li a:hover {
color: #bcc5c4;
}
我想补充工具栏的高度伸展与我的网页内容,并在侧边栏的底部永远离开侧边栏底部的图像.
mon*_*ike 94
这对我有用
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -5000px; /* any large number will do */
padding-bottom: 5000px;
....
}
Ada*_*ant 28
在CSS的flexbox变得更加主流之前,您可以始终只是绝对定位侧边栏,将其与顶部和底部保持零像素,然后在主容器上设置边距以进行补偿.
的jsfiddle
HTML
<section class="sidebar">I'm a sidebar.</section>
<section class="main">I'm the main section.</section>
CSS
section.sidebar {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background-color: green;
}
section.main { margin-left: 250px; }
注意:这是一种简单的方法,但你会发现bottom并不意味着"页面底部",而是"窗口的底部".如果您的主要内容向下滚动,侧边栏可能会完全结束.
Dan*_*eld 13
我会使用css表来实现100%的侧边栏高度.
基本思想是将侧边栏和主要div放在容器中.
给容器一个 display:table
给2个孩子div(侧边栏和主要)a display: table-cell
像这样......
#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}
看看这个实时演示,我用上面的技术修改了你的初始标记(我已经使用不同div的背景颜色,这样你就可以看到哪些是哪个)
Flexbox(http://caniuse.com/#feat=flexbox)
首先在div或section中包装所需的列,例如:
<div class="content">
<div class="main"></div>
<div class="sidebar"></div>
</div>
然后添加以下CSS:
.content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
除了@montrealmike的答案，我可以添加我的改编吗？
我这样做：
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
我做了“ 101％”的事情，以迎合（极罕见的）可能性，即有人可能在高度超过5000px的巨大屏幕上浏览该网站！
蒙特利尔，这是一个很好的答案。它对我来说非常有效。