响应边栏菜单和网页

-1

我正在尝试创建一个HTML网页，其中包含响应边栏菜单和主div。但是我在做这件事时遇到了麻烦..我上传了一张图片，这样你就可以知道我想问什么。响应边栏菜单和网页

这里的链接，图像..

http://i61.tinypic.com/2lca73q.png

请帮我谢谢你..这么多。

我至今是：

CSS

* 
{ 
padding:0; 
margin:0; 
font-family: helvetica; 
} 

html 
{ 
overflow-y:scroll; 
} 

body 
{ 
width:100%; 
height:100%; 
} 

.main 
{ 
width:100%; 
height:100%; 
} 

.sidebar 
{ 
float:left; 
width:8%; 
background:#111; 
display: relative; 
position:absolute; 
height:100%; 
max-height: 100%; 
} 


.space 
{ 
margin-top:125%; 
} 

#add 
{ 
position: relative; 
width:55%; 
margin-left:25%; 
display: block; 
color:#fff; 
text-decoration:none; 
padding:10px 10px 10px 0; 
} 


li 
{ 
list-style: none; 
text-decoration:none; 
padding:3px; 
} 

#view 
{ 
width:55%; 
margin-left:23%; 
display: block; 
position: relative; 
padding:10px 10px 10px 0; 
} 

li:hover 
{ 
background:#333; 
} 

.view:hover 
{ 
b ackground:#333; 
} 

#setting 
{ 
width:76%; 
margin-left:13%; 
position: relative; 
display: block; 
padding:5px 5px 5px 0; 
} 
#logout 
{ 
width:46%; 
margin-left:28%; 
display: block; 
position:relative; 
padding:10px 10px 10px 0; 
} 

h2 
{ 
margin:auto; 
position:absolute; 
margin-left:40%; 
font-weight:normal; 
    color: #666; 
    font-size:18px; 
margin-top:2%; 
display: block; 
} 

.main_box 
{ 
display:inline-block; 
background:#099; 
height:300px; 
width:300px; 
}

HTML

<body> 
<div class = "main"> 
<div class = "sidebar"> 
    <ul> 
     <div class = "space"></div> 
     <li><img src = "images/add.png" id = "add"></a><p class = "txt_add"></p></li> 
     <li><img src = "images/view.png" id = "view"><p class = "txt_view"></p></li> 
     <li><img src = "images/setting.png" id = "setting"><p class = "txt_setting"> </p></li> 
     <li><img src = "images/logout.png" id = "logout"><p class = "txt_logout"></p> </li> 
    </ul> 
</div> 
<h2>ONLINE SPOT VERIFICATION</h2> 

<div class = "main_box"> 

</div> 
</div>

来源

2014-05-05 eiv

html, body { 
    height: 100%; 
}

demo

来源

2014-05-05 02:33:41 falcon

这是你在找什么？ – falcon

http://jsfiddle.net/KMFHu/2/固定边栏 – falcon

是@ user3424754。你的答案很棒！非常感谢你.. :)）嗯如何响应图像？ – eiv

我真的不知道你的问题是什么，但我猜你想要一个完整的高度div？

这是一种在css3中完成的方法。

height: 100vh;

我也认为你想浮动你的.main_box到左边，所以它会在你的边栏旁边。

来源

2014-05-05 02:15:57 JoeriSmits

是你的权利。也是浮动main_box ..我该怎么做呢？ – eiv

@eiv add float：left;到您的.main_box类。 – JoeriSmits

好吧，我会感谢你，但我会遇到新的问题，似乎vh不在ie8工作。你知道如何解决它吗？ – eiv

响应边栏菜单和网页

回答

相关问题