使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？答案

【问题标题】：Force sidebar height 100% using CSS (with a sticky bottom image)?使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？
【发布时间】：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" 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;
}

我希望侧边栏的高度随着我的页面内容而延伸，并将侧边栏底部图像始终保留在侧边栏的底部。

【问题讨论】：

能否也显示您的标记？
其次，加价会有所帮助。并允许我们提供特定的 CSS 或建议。

标签： css sidebar sticky

【解决方案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 有这个：stackoverflow.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>

【讨论】：