CSS布局中的Windows 7资源管理器 [英] Windows 7 explorer in CSS layout

问题描述

我想在CSS中创建一个Windows资源管理器，现在这里是我的代码。

#explorer没有正确定位。

sys_top顶部，总是可见

info_Bar在页面底部，始终可见

左侧的导航栏，宽度为20％

在右侧，宽度为80％

HTML：

  div id =sys_top>< / div> 
< div id =navbar>< / div> 
< div id =explorer>< / div> 
< div id =infobar>< / div> 
  

CSS：

 code> html，body {
 padding：0; 
 margin：0; 
 height：100％; 
 
 cursor：default; 
 
 font-family：Lucida Sans Unicode，Lucida Grande，sans-serif; 
 font-size：12px; 
} 
 #sys_top {
 background：url（../ menu_files / bg.png）repeat-x; 
 width：100％; 
 top：0; 
 position：fixed; 
} 
 #navbar {
 width：20％; 
 height：100％; 
 float：left; 
 left：0; 
 top：30px; 
 position：fixed; 
 border-right：#CCCCCC solid 1px; 
} 
 #explorer {
 width：500px; 
 height：300px; 
 float：right; 
 top：30px; 
 
 overflow：auto; 
} 
 #infobar {
 height：120px; 
 width：100％; 
 bottom：0; 
 
 position：fixed; 
 display：block; 
 margin-top：5px; 
 margin-left：5px; 
} 
  

解决方案

>

和你的css说：

  #explorer {
 width：500px; 
 ... 
  

最终答案：

  body {
 overflow：hidden; 
} 
 
 #navbar {
 position：absolute; 
 width：20％; 
 bottom：120px; 
 left：0; 
 top：30px; 
} 
 
 #explorer {
 position：absolute; 
 top：30px; 
 right：0; 
 bottom：120px; 
 overflow：auto; 
 width：80％; 
} 
  

你应该删除#explorer的float，height，margin， height，float for #navbar。

I'm trying to make a Windows Explorer-like in CSS and for now here is my code.

The #explorer is not positionned correctly. Here is a little explanation of what i'm trying to make.

sys_top on top, always visible

info_Bar at the bottom of the page, always visible

navbar at the left, width of 20%

explorer at the right, 80% width

HTML:

<div id="sys_top"></div>
<div id="navbar"></div>
<div id="explorer"></div>
<div id="infobar"></div>

CSS:

html, body {
padding:0;
margin:0;
height:100%;

cursor: default;

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
}
#sys_top {
background: url(../menu_files/bg.png) repeat-x;
width:100%;
top:0;
position: fixed;
}
#navbar {
width: 20%;
height: 100%;
float:left;
left: 0;
top: 30px;
position: fixed;
border-right: #CCCCCC solid 1px;
}
#explorer {
width: 500px;
height:300px;
float:right;
top: 30px;

overflow:auto;
}
#infobar {
height: 120px;
width: 100%;
bottom:0;

position: fixed;
display:block;
margin-top: 5px;
margin-left: 5px;
} 

解决方案

You say:

explorer at the right, 80% width

and your css says:

#explorer {
width: 500px;
...

FINAL ANSWER:

body {
overflow: hidden;
}

#navbar {
position: absolute;
width: 20%;
bottom: 120px;
left: 0;
top: 30px;
}

#explorer {
position: absolute;
top: 30px;
right: 0;
bottom: 120px;
overflow: auto;
width: 80%;
}

You should drop float, height, margins for #explorer and position:fixed, height, float for #navbar.

这篇关于CSS布局中的Windows 7资源管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！