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

76

数小时以来，我一直在脑海中摸索，试图找出这个问题，并认为这一定是我所缺少的。我已经在网上搜索过，但找不到任何有效的工具。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  sidebar  sticky 
— 乔恩
source
您还可以显示标记吗？
— 比约恩
其次，加价会有所帮助。并允许我们提供特定的CSS或建议。
— 大卫说，请
— Prashobh

Answers:

27

更新：因为这个答案仍然在上下投票，并且在撰写本文时已经八岁了：现在可能有更好的技术。原始答案如下。

显然，您正在寻找Faux列技术：-)

根据高度属性的计算方式，您无法height: 100%在具有自动高度的物体内部进行设置。

— Arve Systad
source
使用人造色谱柱技术是我能够获得的最接近的方法。我遇到的问题是，我无法使侧边栏重叠在导航栏的顶部，并且无法弄清楚如何将“侧边栏底部”图像始终放在侧边栏的底部。
— 乔恩
如果您有一个主容器，其中整个页面都有背景，则可以使用sidebar-bottom-image，如下所示：background: url(blabla) no-repeat bottom;。也可以通过在导航栏背景中“模拟”侧栏来解决使侧栏重叠在导航栏顶部的问题。如果这对您没有意义，您是否会概述您要实现的目标？:)
— Arve Systad 2009年
将侧边栏底部图像放置在站点页脚中，但使用相对或绝对位置或负上边距位置，然后向上抬起使其出现在侧边栏顶部。
— wheresrhys
4
答案可以是昂贵的，负担得起的或便宜的，而这个答案很便宜。
— 约翰
3
他们也可能很老，适合自己的时间。
— 2015年
95

这对我有用

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}
— 蒙特利尔麦克
source
6
这很棒，有什么缺点吗？
— kinet 2012年
同样适合我！谢谢！
— Deekor
12
我发现了这个缺点。如果您尝试使用链接到.container内的特定位置<a href="#location">，.container将滚动到该位置，将其上方的所有内容隐藏起来。请参见：jsfiddle.net/PTvcS –您可以将溢出更改为auto以获得更好的视图。
— 诺伯特
2
我觉得我找到了圣杯。这个技巧很棒，那时候我在侧边栏上遇到了很多问题
— 。–
1
万一其他人像我一样盲目：别忘了这overflow: hidden部分，否则会发生不好的事情。
— Doodad
28

在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它并不意味着“页面底部”，而是“窗口底部”。如果您的主要内容向下滚动，则侧边栏可能会终止。

— 亚当·格兰特
source
很高兴为您服务，请参阅我的笔记以了解它的缺点。
— 亚当·格兰特
也为我工作。谢谢！我认为这是最好的方法。
— Fuhrmann 2013年
但是，如果内容很多，则向下滚动时，侧栏将不再占满整个高度。
— TheYaXxE 2014年
是的，我在回答的底部指出了这一点。
— 亚当·格兰特
1
— 亚当·格兰特
12

我会使用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使用了背景色，以便您可以看到哪个是哪个）

— 丹尼尔
source
1
哇，这太棒了-没有表格的表格布局！
— Dom
1
很好，谢谢。上面的许多其他内容似乎只适用于少量内容，然后崩溃了。这不是，谢谢。
— 迈克尔·肯尼迪
9

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;
}
— 9ete
source
2
看起来这是当今最好的答案。
— MarkSkayff
1
flex-flow:wrap如果您的页面元素停止包装，您可能还想添加
— wranvaud
5

除了@montrealmike的答案，我是否可以添加适应内容？

我这样做：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

我做了“ 101％”的事情，以迎合（极罕见的）可能性，即有人可能会在高度超过5000px的巨大屏幕上浏览该网站！

蒙特利尔，这是一个很好的答案。它对我来说很完美。

— 劳埃德·琼斯（Lloyd Jones）
source
4

我在不同的项目上多次遇到此问题，但是我找到了适合我的解决方案。您必须使用四个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上写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这可以帮助！

— 图书馆
source
1
三个注意事项：1.在HTML 5或4.01 Transitional中，您现在不能使用id“页脚”。您必须将其称为“列脚”或类似名称才能显示和清除。2.正如该博客文章所述，这实际上并没有扩展侧边栏，只是在其后面放置了看起来相同的背景。因此，如果侧边栏为彩色，则必须放入该颜色的div。3.像素宽度对我来说是一件很麻烦的事，但是，如果您启用了box-sizing：border-box，则width：20％和width：80％可以工作。
— Noumenon
1

我面临着与乔恩同样的问题。TheLibzter使我走上了正确的轨道，但没有包括必须留在侧边栏底部的图像。所以我做了一些调整...

重要：

  • 包含侧边栏和内容的div的位置（#bodyLayout）。这应该是相对的。
  • 必须位于sidbar底部（#sidebarBottomDiv）的div的位置。这应该是绝对的。
  • 内容的宽度+侧边栏的宽度必须等于页面的宽度（#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>
— 克里兹
source
1

我意识到这是一篇过时的文章，但我正在尝试为网站提供一些补充工具。这行得通吗？

#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>
— 克里斯·希格斯
source
0

我认为您的解决方案是将内容容器和侧边栏包装在包含div的父级中。将侧边栏浮动到左侧，并为其提供背景图像。为内容容器至少创建边栏宽度的宽边距。添加清除浮动技巧以使其全部正常运行。

— 比约恩
source
0

侧边栏的绝对位置，top：0和bottom：0的位置以及包装器（或容器）的相对位置都包含所有元素，并且完成了！

— 文森特五世
source
0

试试这个。它强制导航栏随着内容的添加而增长，并使主要区域居中。

   <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>
— 网络男孩
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.