2

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

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

以及发生的事情的屏幕截图

问题 我希望黑色继续向下页面到内容的底部。

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

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

干杯

4

4 回答 4

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;    
}
于 2012-12-12T11:55:00.847 回答
1

也许有点晚了，但我的解决方案是一个仅基于 css 的解决方案。我没有通过 js (jquery) 为侧边栏提供 100% 的高度，而是在侧边栏之前创建了一个元素，该元素具有相同的颜色和宽度，并且是固定的：

sidebar:before {
    content: " ";
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    display: block;
    background-color: black;
}
于 2015-02-25T09:22:59.117 回答
0

只需输入保证金：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>
于 2012-12-12T11:37:33.377 回答
0

我找到的解决方案是使用 jquery

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

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

于 2012-12-12T13:01:25.510 回答