在web开发中会经常看到这样的布局，黑色部分高度为100%，宽度是个固定值，灰色部分高度是固定值，宽度是除去黑色部分的剩余宽度，白色的部分的宽高则分别是除去黑色部分的宽度、除去灰色部分的高度。通常，黑色部分最容易确定。灰色和白色部分就会因为对html的布局不够熟悉而不知道怎么办。我们知道html有个position：fixed，这样是可以指定top，left，right，bottom的值的。正好可以利用这个实现以下布局（设置三个部分的position属性为fixed，黑色部分的left，top为0px，width 215px，height 100%，灰色部分top 0px，left为黑色部分的宽度215px，白色部分的left也一样215px；设置灰色和白色部分的right为0px，灰色高度45px，白色的top为黑色的高度，bottom为0px）
代码如下：
<HTML lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签配置</title>
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
width: 100%;
height: 100%;
}
.my-header {
width: 100%;
height: 45px;
margin-top:0px;
background-color: rgb(244,244,244);
color: gray;
}
.my-maincontent {
width: 100%;
height: 100%;
margin-top:0px;
}
.my-left-bar {
width: 215px;
height:100%;
position:fixed;
left:0px;
background-color: rgb(51, 54, 78);
}
.my-right-content {
height: 100%;
position:fixed;
left:215px;
top:0px;
right:0px;
min-width:215px;
margin-top:0px;
}
.my-laft-menu {
color: white;
height: 100%;
}
.my-bread {
border-bottom: 1px dotted gray;
padding-bottom:10px;
margin-top:10px;
width: 100%;
color:gray;
}
.my-bread span{
padding:6px;
}
.my-bread .active{
color:rgb(120,120,220);
}
.my-bread .active:hover{
cursor: pointer;
}
.my-main-content{
margin-left:10px;
margin-right:10px;
}
.top-menu-item{
height:100%;
line-height:45px;
margin-left:10px;
display:inline-block;
}
</style>
</head>
<body>
<div class="my-maincontent">
<div class="my-left-bar">
<div class="my-laft-menu">
</div>
</div>
<div class="my-right-content">
<div class="my-header">
<div>
<span class="top-menu-item">一些菜单</span>
</div>
</div>
<div class="my-main-content">
<div>
</div>
</div>
</div>
</div>
</body>
</html>
5533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
