让 div 一直向下移动页面答案

【问题标题】：Make div go all the way down the page让 div 一直向下移动页面
【发布时间】：2014-09-16 00:54:22
【问题描述】：

我正在为我的一门课程做一个网页设计项目。我不知道如何让 div 沿着整个页面（颜色）向下移动

http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD

摘录：

nav {
    background: black;
    color: white;
    float:left;
    width:20%;
    height:800px;
    display:inline-block;
    /*margin-top: 40px;*/
    padding-bottom: 40px;
    position: relative;
    z-index: 10;    
}

#main {
    background-color:#04cfe1;
    float:right;
    width:80%;
    /*margin-right:10px;*/
}

注意：我是一个相当温和的编码员，所以我尝试了 height: 100% 并且没有任何作用。

我正在尝试让黑色边栏一直走，而蓝色则跨越页面的其余部分。

整页网站：http://rubergaming.com/project/

非常感谢！

【问题讨论】：

除此之外，您的标记中还有一些其他问题......例如，请注意，您不能在多个元素上使用相同的id（因此应该只出现一次id="main" 在您的文档中）
我会调查的，谢谢！我只花了大约 3 个小时，所以这是一项快速的工作。

标签： html css

【解决方案1】：

您可以通过使用 100% 的高度来实现这一点，但您可能忘记了，您还需要为容器元素提供 100% 的高度，以便在为 #main div 提供 100% 高度时使其工作.我还稍微修改了您的一些其他样式，您可能需要根据需要进行调整。 http://jsfiddle.net/ngz6e5p1/。

/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
    height: 100%;
}

/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
    height: 100%;
    padding-top: 0px;
    padding-bottom:0px;
}

【讨论】：

非常感谢老兄！我还有一个问题，我正在尝试获取所有主要部分的文本，以及在宽度一侧没有的内容，我尝试的唯一方法是使用背景颜色：/ grab.by/AnIE

【解决方案2】：

黑条一路走到底是什么意思？并将蓝色 div 跨越页面的其余部分，请尝试以下操作：

<div id="main" style="
    position: absolute;
    margin-left: 20%;
    bottom: 0;
    top: 0;
">
    //ALL THE OTHER STRUFF INSIDE THIS DIV
</div>

【讨论】：