<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.AllDiv {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
.TopNavigation {
background-color: #262F3E;
width: 100%;
height: 60px;
position: fixed;
color: white;
z-index: 1500;
display: flex;
align-items: center;
justify-content: space-between;
}
.BodyContentSurface {
background-color: #F3F4F7;
width: 100%;
flex: 1;
}
.BodyContent {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: row;
}
.LeftNavigationSurface {
height: 100%;
width: 200px;
position: fixed;
background-color: #F3F4F7;
border: 1px solid red;
}
.left
{
margin-top: 60px;
}
.RightContentSurface {
height: 90%;
flex: 1;
margin-left: 200px;
margin-top: 60px;
}
.RightContent {
width: 100%;
height: 100%;
}
.content
{
height: 3000px;
background-color: #F3F4F7;
}
</style>
</head>
<body>
<div class="AllDiv">
<!---顶部菜单栏（固定位置和高度：60px）--->
<div class="TopNavigation">
</div>
<!---内容区外壳（自适应铺满高度）--->
<div class="BodyContentSurface">
<!---内容区--->
<div class="BodyContent">
<!---左侧导航栏（固定位置和宽度：200px）--->
<div class="LeftNavigationSurface">
<div class="left">
LeftNavigationSurface
</div>
</div>
<!---右侧内容区（自适应铺满宽度）--->
<div class="RightContentSurface">
<!---右侧内容区--->
<div class="RightContent">
RightContent
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML顶部导航栏固定，左侧菜单栏固定，右侧内容区上下滚动
转载请注明出处或者链接地址：https://www.qianduange.cn//article/12980.html
相关文章
-
JQuery工具方法整理，CSS的文本样式属性值
-
用jQuery方法写：点击盒子里面的内容点击跳转第一个盒子内容跑到到另一个盒子
-
静态HTML旅行主题网页作业——青岛民俗7页html css javascript jquery 地方民俗网页设计与实现
-
【小河今学 | Bootstrap-v3】响应式后台管理系统网页制作【纯布局】（上）
-
html静态网站基于动漫主题网站网页设计与实现共计10个页面——二次元漫画
-
element的table组件根据后端返回数字渲染成文字记录
-
【基于HTML5的网页设计及应用】——全选和取消全选
-
HTML5 CSS3面试题整理(2)
-
关于微信客户端内H5网页获取用户授权信息实现步骤（基于snsapi_userinfo类型的操作）
-
【博主推荐】HTML5实现简洁好看的个人简历网页模板源码
发布的文章
python根据json数据画疫情分布地图_json全国疫情数据
2024-07-08 09:07:02
【教程】使用 UnityWebRequest 进行 Post Json内容
2024-07-08 09:07:02
json基本格式
2024-07-08 09:07:01
Delphi7下SuperObject的JSON使用方法
2024-07-08 09:07:30
尝试在 Java 中使用 Moshi JSON 库
2024-07-08 09:07:30
Python实现Labelme的Json标注文件与YOLO格式的TXT标注文件相互转换
2024-07-08 09:07:24
A JSONObject text must begin with ‘{‘ at 1 [character 2 line 1]
2024-07-08 09:07:24
http.cookiejar.LoadError: Cookies file must be Netscape formatted,not JSON.解决方案
2024-07-08 09:07:22
大家推荐的文章