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

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

Answer 1

这对我有用

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

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

Answer 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并不意味着“页面底部”，而是“窗口底部”。如果您的主要内容向下滚动，侧栏可能会完全结束。

Answer 3

更新：由于这个答案仍在上下投票，而且正处于写入八年之前：现在可能有更好的技术了。原始答案如下。

显然，您正在寻找Faux columns技术： - ）

通过如何计算height属性，您无法在具有自动高度的内容中设置height: 100%。

Answer 4

我会使用 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;
}

看看这个 LIVE DEMO ，我已经使用上面的技术修改了你的初始标记（我已经使用了不同div的背景颜色，这样你就可以看到哪些是哪个）

Answer 5

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

Answer 6

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

Answer 7

继@montrealmike的回答之后，我可以添加我的改编吗？

我这样做了：

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

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

我做了“101％”的事情，以满足某人在超过5000像素的巨大屏幕上观看网站的可能性（超罕见）！

很棒的答案，montrealmike。它对我来说很完美。

Answer 8

也许Multi-Column Layouts Climb Out of the Box正是您要找的？

Answer 9

我想，今天可能会使用flexbox。请参阅holy grail example。

Answer 10

我遇到了和Jon一样的问题。 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>

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

Answer 12

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

Answer 13

如果使用固定宽度侧边栏，请使用正文背景，并为侧边栏提供相同宽度的图像。还在你的css代码中加上background-repeat：repeat-y。

Answer 14

位置绝对，顶部：0和底部：0为侧边栏和位置相对于包装器（或容器）包含所有元素并且已完成！

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

CSS边栏高度100％

15 个答案: