Question

如果你看这里，你可以看到，如果右边有一个滚动条，左边的侧边栏，应该填满整个身体，在底部产生一个间隙。

**CSS**

html, body {
    height: 100%;    
    min-height: 100%;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.sidebar {
    background: black;
    width: 260px;
    float: left;
    height: auto !important;
}
.wrapper, .sidebar {
    height: 100%;
    min-height: 100%;    
}

.content {
    float: left;
    margin-top: 15%;
    width: 700px;
}


footer {
    float: left;
    padding: 15px 0;
    width: 700px;
    text-align: center;    
}


**HTML** 

<div class="wrapper">
            <div class="sidebar">
                <nav> 
                    <ul>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                    </ul>
                </nav>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac ligula congue felis accumsan scelerisque sed eu risus. Nulla sed leo velit. Sed at commodo orci. Nam vitae varius risus. Vestibulum facilisis tortor aliquam orci rutrum vestibulum. Cras tincidunt pretium mauris non tristique. Vestibulum et justo tortor, at facilisis erat.</p>
                <footer>
                    <p>FOOTER</p>
                </footer>
            </div>
        </div>

http://jsfiddle.net/5YHX7/567/

发生了什么的截图

Problem 我希望黑色继续向下翻到内容的底部。

我已经意识到100％的高度仍然有效，但它似乎填满了窗口而不是继续填充内容。

我可以使用虚拟列技术但理想情况下我想在css中解决这个问题，我也愿意使用jquery。

干杯

Answer 1

http://jsfiddle.net/5YHX7/578/查看此示例。你需要固定侧边栏并将一些元素浮动到右边。希望它有所帮助。

突出显示了css更改：

 .sidebar {
  background: black;
  width: 260px;
  float: left;
  height: auto !important;
  position:fixed;
 }

 .content {
  float: right;
  margin-top: 15%;
  width: 700px;
 }


 footer {
  float: right;
  padding: 15px 0;
  width: 700px;
  text-align: center;    
}

Answer 2

可能有点迟，但我的解决方案是基于css的解决方案。我没有通过js（jquery）给侧边栏提供100％的高度，而是在侧边栏之前创建了一个元素，它具有相同的颜色和宽度：

sidebar:before {
    content: " ";
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    display: block;
    background-color: black;
}

Answer 3

只需加上保证金：0;在身体里，你已经完成了。

html, body
        {
            height: 100%;
            margin:0;
        }

完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
        html, body
        {
            height: 100%;
            margin:0;
        }
        .wrapper
        {
            width: 960px;
            margin: 0 auto;
            position: relative;
        }
        .sidebar
        {
            background: black;
            width: 260px;
            float: left;
        }
        .wrapper, .sidebar
        {
            height: 100%;
            min-height: 100%;
        }

        .content
        {
            float: left;
            margin-top: 15%;
            width: 700px;
        }


        footer
        {
            float: left;
            width: 700px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="sidebar">
            <nav> 
                    <ul>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Menu</a></li>
                    </ul>
                </nav>
        </div>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac ligula congue
                felis accumsan scelerisque sed eu risus. Nulla sed leo velit. Sed at commodo orci.
                Nam vitae varius risus. Vestibulum facilisis tortor aliquam orci rutrum vestibulum.
                Cras tincidunt pretium mauris non tristique. Vestibulum et justo tortor, at facilisis
                erat.</p>
            <footer>
                    <p>FOOTER</p>
                </footer>
        </div>
    </div>
</body>
</html>

Answer 4

我发现的解决方案是使用jquery

var contentHeight = $(".content").outerHeight();
    $(document).ready(function() {
        $(".sidebar").css('min-height', contentHeight);
    });

它使用变量来获取内容的高度，然后将此值作为最小高度应用于侧边栏，这样如果某人有一个小视口或内容非常长，它将应用最小高度内容。

最小高度100％侧边栏 - 滚动时在下方创建间隙

4 个答案: