How can I make a div with height 100% on css?
本问题已经有最佳答案,请猛点这里访问。
喂,伙计们!我想做一份100%高度的左菜单。
右侧将有一个内容区,右侧也有一个页脚。
我想让左边的浅蓝色菜单到达页面的底部0。
检查这个J小提琴http://jsfiddle.net/myw72/
或者这个密码!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | Help <span> | </span> Contact us <ul> <li> Company </li> <li> Administrator </li> <li> App </li> <li> Configuration </li> <li> Statistics </li> <li> Monitor </li> <li> Preference </li> </ul> Content. Copyright 2012 <span>ME</span>, Inc. All Rights Reserved |
CSS是这样的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | html { padding:0px; margin:0px; } body { background-color: #ECEDEF; font-family: Verdana, Tahoma, Sans-Serif; color:#564b47; padding:0px; margin:0px; } #top { background-image: url('../img/top.png'); background-repeat: repeat-x; width: 100%; height: 96px; } #rightSide{ overflow: hidden; } #sidebar{ position: relative; background:lightblue; border-right:1.7px solid #FFFFFF; min-height: 100%; line-height: 100%; float: left; height: 100%; margin-top: -5px; } #sidebar ul li { list-style-type: square; list-style-position: inside; width:209px; height:100%; margin-top:15px; } #sidebar ul li a{ list-style-position: inside; display: block; color:#3C3C3C; text-decoration:none; font-size:13px; font-weight:bold; padding:10px 20px 10px 40px; } #sidebar ul li a:hover { color:#7da536; width:209px; border-right: 1.7px solid #ECEDEF; background: #ECEDEF; } #sidebar ul li a:active{ background: #ECEDEF; border-top: 1.7px solid #D8D9DB; border-bottom: 1.7px solid #FFF; border-right: 1.7px solid #FFF; width:149px; } #content{ margin-left: 10px; } #bottom { position: absolute; bottom: 0; background-color: #ECEDEF; width: 100%; padding: 53px 0 0 0; } #bottom1 { position: absolute; bottom: 0; /*background-color: #ECEDEF;*/ background-color: greenyellow; /* width: 85.3%;*/ width: 100%; padding: 53px 0 0 0; /* margin-left: 211px;*/ } |
号
1 | html, body, #container { height: 100% } |
你可以将左栏的高度设置为100%,因为它里面的所有东西都设置为100%的高度。
CSS示例:
1 2 | html, body, #container{height:100%} #sidebar{height:100%;} |
号