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

Question

几个小时以来，我一直把头撞在墙上，试图弄清楚这个问题，并认为它一定是我遗漏的一些小东西。我在网上搜索过，但我发现似乎没有任何效果。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;
}

我希望侧边栏与我的页面内容一起拉伸高度，并将侧边栏底部图像始终留在侧边栏的底部。

score 97 · Accepted Answer

这对我有用

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

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}

score 32 · Accepted Answer

在 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它的意思不是“页面底部”，而是“窗口底部”。如果您的主要内容向下滚动，侧边栏可能会突然结束。

score 29 · Accepted Answer

更新：由于这个答案仍然得到上下投票，并且在撰写本文时已有八年之久：现在可能有更好的技术。原始答案如下。

显然，您正在寻找仿列技术:-)

通过计算高度属性的方式，您不能height: 100%在具有自动高度的东西中设置。

score 14 · Accepted Answer

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

score 9 · Accepted Answer

弹性盒（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;
}

score 5 · Accepted Answer

除了@montrealmike 的回答，我可以添加我的改编吗？

我这样做了：

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

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

我做了“101%”的事情是为了迎合（极其罕见的）可能有人在一个高度超过 5000 像素的大屏幕上查看该网站的可能性！

很好的答案，蒙特利尔麦克。它对我来说非常有效。

score 4 · Accepted Answer

我在不同的项目中多次遇到这个问题，但我找到了适合我的解决方案。您必须使用四个 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”&gt;
<div class=”sidebar”&gt;</div>
<div class=”content”&gt;</div>
<div id=”footer”&gt;</div>
</div>

我在http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container上写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这可以帮助！

score 2 · Accepted Answer

2

也许多列布局开箱即用是您正在寻找的？

于 2009-04-26T17:24:40.270 回答

score 2 · Accepted Answer

2

我想，今天可能有人会为此使用 flexbox。请参阅圣杯示例。

于 2013-10-15T20:14:37.687 回答

score 1 · Accepted Answer

我和乔恩面临同样的问题。TheLibzter 让我走上了正轨，但必须留在侧边栏底部的图像不包括在内。所以我做了一些调整...

重要的：

包含侧边栏和内容 (#bodyLayout) 的 div 的定位。这应该是相对的。
必须保持在 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>

score 1 · Accepted Answer

我意识到这是一篇旧帖子，但我试图为我的网站设计一个侧边栏。这行得通吗？

#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>

score 0 · Accepted Answer

我认为您的解决方案是将您的内容容器和侧边栏包装在包含 div 的父级中。将侧边栏浮动到左侧并为其提供背景图像。为内容容器创建至少与侧边栏宽度相同的宽边距。添加清除浮动黑客以使其全部工作。

score 0 · Accepted Answer

如果您使用固定宽度的侧边栏，请使用正文背景提供与侧边栏相同宽度的图像。还将 background-repeat:repeat-y 放入您的 CSS 代码中。

score 0 · Accepted Answer

侧边栏的绝对位置，顶部：0 和底部：0 以及包装器（或容器）的相对位置，包含所有元素，它完成了！

score 0 · Accepted Answer

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

   <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>

score 0 · Accepted 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 - 使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？

16 回答 16

Related

Reference