Question

我正在为我的一个班级开设网页设计项目。我无法想象如何使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;*/
}

注意：我是一个非常温和的程序员，所以我尝试过高度：100％并没有做任何事情。

我试图让黑边栏一直向前移动，蓝色跨越页面的其余部分。

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

非常感谢！

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

Answer 2

黑色酒吧一路走来是什么意思？并跨越页面其余部分的蓝色div尝试：

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

让div一直向下移动

2 个答案: