使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？
Posted
技术标签:
【中文标题】使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？【英文标题】：Force sidebar height 100% using CSS (with a sticky bottom image)? 【发布时间】：2009-04-26 17:20:39 【问题描述】：几个小时以来，我一直在努力解决这个问题，并认为这一定是我遗漏的一些小问题。我在网上搜索过，但我发现似乎没有任何效果。 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" /></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" /></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" /></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;
我希望侧边栏的高度随着我的页面内容而延伸，并将侧边栏底部图像始终保留在侧边栏的底部。
【问题讨论】：
能否也显示您的标记？ 其次，加价会有所帮助。并允许我们提供特定的 CSS 或建议。 【参考方案1】：这对我有用
.container
overflow: hidden;
....
#sidebar
margin-bottom: -5000px; /* any large number will do */
padding-bottom: 5000px;
....
【讨论】：
这很好，有什么缺点吗？ 我发现了一个缺点。如果您尝试使用<a href="#location"> 链接到 .container 内的特定位置，.container 将滚动到该位置，而隐藏其上方的任何内容。请参阅：jsfiddle.net/PTvcS - 您可以将溢出更改为自动以获得更好的视图。
我觉得我找到了圣杯。这个技巧太棒了，当时我的侧边栏有很多问题..
万一其他人像我一样失明：不要忘记overflow: hidden部分，否则会发生坏事。
这会使页面高 5000px，对吗？没有其他人会被那个只显示一小部分页面的滚动条所困扰吗？【参考方案2】：
在 CSS 的 flexbox 变得更加主流之前，您始终可以绝对定位侧边栏，将其与顶部和底部相距零像素，然后在主容器上设置边距以进行补偿。
JSFiddle
http://jsfiddle.net/QDCGv/
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 的意思不是“页面底部”，而是“窗口底部”。如果您的主要内容向下滚动，侧边栏可能会突然结束。
【讨论】：
很高兴为您工作，请参阅我关于其缺点的说明。 也适合我。谢谢！我认为这是最好的方法。 但是如果你有很多内容，那么当你向下滚动时，侧边栏将不再填满整个高度。 对，我在答案的底部注意到了这一点。 @wranvaud 有这个：***.com/a/32639892/393243【参考方案3】：更新：因为这个答案仍然得到上下投票，并且在撰写本文时已有 八年：现在可能有更好的技术.原始答案如下。
显然您正在寻找Faux columns 技术:-)
根据高度属性的计算方式，您不能在具有自动高度的东西中设置height: 100%。
【讨论】：
使用仿列技术是我能得到的最接近的方法。我遇到的问题是我无法让侧边栏重叠在导航栏的顶部，而且我不知道如何将“侧边栏底部”图像始终放在侧边栏的底部。 如果你有一个主容器，其中有整个页面的背景，你可以像这样使用侧边栏底部图像：background: url(blabla) no-repeat bottom;。使侧边栏重叠在导航栏顶部也可以通过“模拟”导航栏背景中的侧边栏来解决。如果这对你没有意义，你会画出你想要达到的目标吗？ :)
将侧边栏底部图像放在网站页脚中，但使用相对位置或绝对位置，或负上边距，tp 将其抬起，使其显示在侧边栏顶部。
答案可以是昂贵的、负担得起的或便宜的，而这个答案很便宜。
他们也可能老了，适合他们的时代。【参考方案4】：
我会使用 css 表格 来实现 100% 的侧边栏高度。
基本思想是将侧边栏和主 div 包装在一个容器中。
给容器一个display:table
并给 2 个子 div（侧边栏和主）一个 display: table-cell
像这样..
#container
display: table;
#main
display: table-cell;
vertical-align: top;
#sidebar
display: table-cell;
vertical-align: top;
看看这个 LIVE DEMO 我使用上述技术修改了您的初始标记（我为不同的 div 使用了背景颜色，以便您可以看到哪些是哪些）
【讨论】：
哇，这太棒了 - 没有表格的表格布局！ 这太好了，谢谢。上面的许多其他内容似乎适用于小内容，然后分崩离析。这个没有，谢谢。 小演示 jsfiddle.net/n1crdy4f/1【参考方案5】：弹性盒 (http://caniuse.com/#feat=flexbox)
首先将您想要的列包装在一个 div 或部分中，例如：
<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;
【讨论】：
看起来这是当今最好的答案。 如果您的页面元素停止换行，您可能还想添加flex-flow:wrap【参考方案6】：
除了@montrealmike 的回答，我可以添加我的改编吗？
我这样做了：
.container
overflow: hidden;
....
#sidebar
margin-bottom: -101%;
padding-bottom: 101%;
....
我做了“101%”的事情是为了迎合（极其罕见的）有人可能在高度超过 5000 像素的大屏幕上查看网站的可能性！
不过，很好的答案，montrealmike。它对我来说非常有效。
【讨论】：
【参考方案7】：我在不同的项目中多次遇到此问题，但我找到了适合我的解决方案。您必须使用四个 div 标签 - 一个包含侧边栏、主要内容和页脚。
首先，为样式表中的元素设置样式：
#container
width: 100%;
background: #FFFAF0;
.content
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
.sidebar
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
#footer
clear:both;
background:#FFFAF0;
您可以根据需要编辑不同的元素，只要确保不要更改页脚属性“clear:both” - 保留这一点非常重要。
然后，只需像这样设置您的网页：
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
我在http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container 写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这会有所帮助！
【讨论】：
三个注意事项： 1. 现在在 HTML 5 或 4.01 Transitional 中不能使用 id 'footer'。您必须将其称为“列页脚”或其他名称才能显示和清除。 2. 正如博文所说，这实际上并没有扩展侧边栏，它只是在其后面放置一个看起来相同的背景。因此，如果您的侧边栏是彩色的，则必须放入该颜色的 div。 3. 像素宽度对我来说一切都搞砸了，但 width:20% 和 width:80% 工作，如果你有 box-sizing:border-box 打开。【参考方案8】：也许Multi-Column Layouts Climb Out of the Box 就是你要找的东西？
【讨论】：
【参考方案9】：我想，今天人们可能会为此使用 flexbox。请参阅holy grail example。
【讨论】：
您需要在答案中添加更多细节。为什么要为此使用 flexbox？【参考方案10】：我和乔恩面临同样的问题。 TheLibzter 让我走上了正轨，但必须留在侧边栏底部的图像不包括在内。所以我做了一些调整...
重要：
包含侧边栏和内容的 div 的定位 (#bodyLayout)。这应该是相对的。 必须位于 sidbar 底部的 div 的位置 (#sidebarBottomDiv)。这应该是绝对的。 内容宽度+侧边栏宽度必须等于页面宽度（#container）这是css：
#container
margin: auto;
width: 940px;
#bodyLayout
position: relative;
width: 100%;
padding: 0;
#header
height: 95px;
background-color: blue;
color: white;
#sidebar
background-color: yellow;
#sidebarTopDiv
float: left;
width: 245px;
color: black;
#sidebarBottomDiv
position: absolute;
float: left;
bottom: 0;
width: 245px;
height: 100px;
background-color: green;
color: white;
#content
float: right;
min-height: 250px;
width: 695px;
background-color: White;
#footer
width: 940px;
height: 75px;
background-color: red;
color: white;
.clear
clear: both;
这是html：
<div id="container">
<div id="header">
This is your header!
</div>
<div id="bodyLayout">
<div id="sidebar">
<div id="sidebarTopDiv">
This is your sidebar!
</div>
<div id="content">
This is your content!<br />
The minimum height of the content is set to 250px so the div at the bottom of
the sidebar will not overlap the top part of the sidebar.
</div>
<div id="sidebarBottomDiv">
This is the div that will stay at the bottom of your footer!
</div>
<div class="clear" />
</div>
</div>
</div>
<div id="footer">
This is your footer!
</div>
【讨论】：
【参考方案11】：我意识到这是一篇旧帖子，但我正在努力为我的网站设计一个侧边栏。 这行得通吗？
#sidebar-background
position:fixed;
width:250px;
top:0;
bottom:0;
background-color:orange;
#content-background
position:fixed;
right:0;
top:0;
bottom:0;
left:250px;
background-color:pink;
#sidebar
float:left;
width:250px;
#content
float:left;
width:600px;
<div id="sidebar-background"></div>
<div id="content-background"></div>
<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>
【讨论】：
【参考方案12】：我认为您的解决方案是将内容容器和侧边栏包装在包含 div 的父级中。将侧边栏浮动到左侧并为其提供背景图像。为内容容器创建至少与侧边栏宽度相同的宽边距。添加clearing a float hack 以使一切正常。
【讨论】：
【参考方案13】：如果您使用固定宽度的侧边栏，请使用正文背景，以提供与侧边栏相同宽度的图像。还将 background-repeat:repeat-y 放在你的 CSS 代码中。
【讨论】：
【参考方案14】：侧边栏的绝对位置，顶部：0 和底部：0 以及包装器（或容器）的相对位置，包含所有元素，并且完成了！
【讨论】：
【参考方案15】：试试这个。它强制导航栏随着内容的添加而增长，并保持主要区域居中。
<html>
<head>
<style>
section.sidebar
width: 250px;
min-height:100vh;
position: sticky;
top: 0;
bottom: 0;
background-color: green;
section.main position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh;
</style>
<script lang="javascript">
var i = 0;
function AddOne()
for(i = 0;i<20;i++)
var node = document.createElement("LI");
var textnode = document.createTextNode(' Water ' + i.toString());
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
</script>
</head>
<body>
<section class="sidebar">
<button id="add" onclick="AddOne()">Add</button>
<ul id="list">
<li>bullshit 1</li>
</ul>
</section>
<section class="main">I'm the main section.</section>
</body>
</html>
【讨论】：
【参考方案16】：这是danield's answer的简化版
.container
display: table;
height: 260px;
#sidebar
display: table-cell;
vertical-align: top;
background-color:red;
position:relative;
#sidebarbottom
height:30px;
position:absolute;
bottom:0;
<div class="container">
<div id="sidebar">
SIDEBAR HERE
<div id="sidebarbottom">
Sidebar Bottom
</div>
</div>
</div>【讨论】：
以上是关于使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？的主要内容，如果未能解决你的问题，请参考以下文章
导航栏和粘性 Bootstrap 页脚之间的 100% 高度
解决ElementUI使用了布局容器后，侧边栏高度设置100%却没有撑开高度
即使在滚动时，也使侧边栏（在 React 中）占据页面高度的 100%