2014-09-21 120 views
0

大家好,首先抱歉提问已经被问了很多次的问题。原谅我说,我一直没能找到一个匹配的答案,并与我的代码工作,这就是为什么我问:) :)如何使div 100%高度

嗯,我想让我的边栏div 100%的高度,而不是只是调整到内容里面的div如何做到这一点?

这里是我的代码:

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

.SideMenu { 
    height:100%; 
    float:left; 
    background-color:#ACB9B1; 
    width:20%; 
    margin:0; 
    overflow-y:hidden; 
    overflow-x:hidden; 
} 

http://jsfiddle.net/u9r7zeyk/这显示了在全高,不知道为什么?

+1

请出示在** JS拨弄你的代码**或**中的堆栈Snippest * * – 2014-09-21 16:05:26

+0

http://jsfiddle.net/u9r7zeyk/在这里它显示在全高度在那里不知道为什么? – Anoxy 2014-09-21 16:25:44

+0

如果我们看不到它,我们很难解决您的问题。 :) – Adam 2014-09-21 16:28:20

回答

0

你好HUYS感谢的投入,我所做的,你可以在这里看到:

.menu{ 
background-color:#ACB9B1; 
width: 200px; 
position: fixed; 
top: 0px; 
left: 0px; 
bottom: 0px;  
} 

.menu li a { 
display:block; 
text-decoration: none; 
color: #fff; 
line-height: 1.5; 
margin-left:5%; 
color:#A92432; 
      } 
.menu li { 
width: 100%; 

height: 30px; 
font-family: 'Open Sans'; 
border-bottom: 1px solid #A92432;; 
font-size:18px; 
     } 
0

试试这个:

html, body { 
    height:100%; 
} 

.SideMenu { 
    height:100%; 
    background-color:#ACB9B1; 
    width:20%; 
} 
+0

我不为我工作:( – Anoxy 2014-09-21 16:27:21

+1

请尝试解释你想要的是什么 – 2014-09-21 16:30:23

+0

请看这里http://imgur.com/uFUciqA为一个视觉我想要在左边的灰色div是身高100%浏览器窗口无论我在网页上有多少内容谢谢 – Anoxy 2014-09-21 16:42:30

0

编辑,在这里你去。我认为这是你想要的。

html, body { 
     margin: 0px; 

    } 

    .SideMenu { 
     position:absolute; 
     height:100%; 
     float:left; 
     background-color:#ACB9B1; 
     width:20%; 
     margin:0; 
     overflow-y:hidden; 
     overflow-x:hidden; 
    } 

http://jsfiddle.net/u9r7zeyk/2/

+0

否在你的例子中看到div停止当div内的内容我希望div是高度100%的浏览器窗口希望你明白:) – Anoxy 2014-09-21 17:29:28

+0

@Anoxy,现在检查它。 – Api42 2014-09-23 06:10:17