Question

我正在尝试创建一个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>

Answer 1

html, body {
    height: 100%;
}

demo

Answer 2

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

这是在css3中执行此操作的方法。

height: 100vh;

我还认为你想把你的.main_box浮动到左侧，这样它就会在你的侧边栏旁边。

响应边栏菜单和网页

2 个答案: