用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面
这个页面header部分是100%的宽度，60px的高度，左侧是刚好一屏的高度，180的宽度，右侧的部分把剩余的空间占满，刚开始的时候还没怎么接触这样的页面，以为使用js读取浏览的可视化宽高，然后在做计算，但是因为后面做的页面需要自适应屏幕的大小而发生变化，于是我用了jquery中的$(window).resize()方法，当屏幕出现各种各样的大小或者以各种方式打开浏览器的时候会出现很多问题，很多时候当屏幕很小的打开页面的时候，页面是乱的，刷新一次之后，才恢复正常。后来我发现这种方式实不可取的，这样的页面最好不要用js来计算，后面找啊找，我发现了一个css3中的属性，可以用calc()来计算一些宽高之类的，但是这个属性在低版本的IE下面是不被支持的，最后经过研究之后，可以通过定位来实现这样的页面。下面附上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
background: #ddd;
z-index: 100;
}
.content{
position: relative;
width: 100%;
height: 100%;
left: 0;
overflow: hidden;
}
.cnt-lf{
position: absolute;
width: 180px;
height: 100%;
top: 60px;
left: 0;
background: orange;
}
.cnt-rg{
min-width: 900px;
padding-top: 60px;
padding-left: 200px;
}
.cnt-box{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="cnt-lf">
<div class="tp" style="width: 100%;height: 50%;background: red;"></div>
<div class="tp" style="width: 100%;height: 50%;background: black;"></div>
</div>
<div class="cnt-box">
<div class="cnt-rg">5154512112545445112454545
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati tenetur architecto tempora atque aperiam minus et impedit expedita perferendis. Reiciendis id, modi cumque explicabo, similique officia magnam aspernatur necessitatibus numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores modi, fugiat inventore dolores quam laboriosam eligendi pariatur laborum, excepturi odio et autem dolorem ullam, exercitationem hic soluta. Aspernatur, recusandae, maxime.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tenetur, minima dolorum. Ut praesentium dolor, tenetur quia fuga numquam consectetur! Excepturi recusandae, consectetur illum. Velit, odit, dolorum. Sint, incidunt, totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui porro officia numquam temporibus, labore ipsum consequatur sapiente, amet suscipit mollitia culpa quia. Illum quasi officiis adipisci, suscipit vero ratione eaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam temporibus animi, ut, nam unde deleniti veniam! Sed illo, quia, animi error quae natus vel alias rerum voluptates neque, perspiciatis sunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum perferendis rem rerum quod neque reprehenderit vitae quia dignissimos natus harum voluptas commodi dolore hic assumenda dolorem eum, ab nobis nesciunt.</p>
的撒旦法师法师法 暗示法师法师是是是是是是是是是是是是是是是是
</div>
</div>
</div>
</body>
</html>
用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面的更多相关文章
- 还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...
- 玩玩CSS,写一个图标堆叠效果
遇到有人问如下效果怎么写,一时兴起,自己写一个玩玩. 看到这个样子,首先应该考虑一下 DOM 结构,以我的观点,把DOM结构设计为如下形式: <div> <img src=" ...
- CSS写一个圣诞树Chrome浏览器小插件
一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...
- 纯css写一个大太阳的天气图标
效果 效果图如下 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...
- 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？
如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...
- Java-Web 用html和css写一个EasyMall注册界面
要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...
- 用html，CSS 写一个静态的博客网页
<!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...
- css 写一个向右的箭头
经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 width: 7px; height: 7px; border-top: 2px solid #fff ...
- css写一个梯形
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>D ...
随机推荐
- SwiftLint：代码规范检查工具介绍
Swift-CodeStyle Checker:SwiftLint 介绍: SwiftLint 是一个用于强制检查 Swift 代码风格和规定的一个工具,基本上以 GitHub's Swift 代码风 ...
- 常用的方法论-AAR
- ansible安装应用软件
1.创建相应的目录: mkdir -p /ansible/roles/{nginx,mysql,tomcat,db,zabbix}/{defaults,files,handlers,meta,task ...
- Java 读取PDF中的文本和图片
本文将介绍通过Java程序来读取PDF文档中的文本和图片的方法.分别调用方法extractText()和extractImages()来读取. 使用工具:Free Spire.PDF for Ja ...
- Excel催化剂开源第38波-json字符串转多个表格结构
作为开发者来说,面对json字符一点不陌生,但对于普通用户来说,更合适的是数据表结构的数据,最好数据已经躺在Excel表格内,不用到处导入导出操作.所以开发者和用户之间是有不同的数据使用思维和需求的. ...
- Excel催化剂开源第36波-图片Exif信息提取，速度超快，信息超全
Excel催化剂在文件处理方面,功能做到极致,但其实很大功劳都是引用一些开源社区的轮子库,不敢独占好处,此篇给大家分享下抓取图片的Exif信息的好用的轮子. 此篇对应的Excel催化剂功能实现:第83 ...
- C语言入门9-1-分类函数
分类函数 ASCII字符可以分为英文字母.数字.控制字符.空白字符.大小写字母以及标点符号,分类是指对字符进行属性判定,判断字符属于哪些范畴,这些属性的判定在程序中非常常见,尤其是通信协议的字符处理部 ...
- 上车时机已到--.NETCore是适应时代发展的雄鹰利剑
上车时机已到--.NETCore是适应时代发展的雄鹰利剑 要起飞了 .NET Core 3.0-prevew7:https://dotnet.microsoft.com/download/dotnet ...
- linux初学者-磁盘加密篇
linux初学者-磁盘加密篇 因为保密需要,一般系统中会在文件和磁盘中进行加密,但是文件的加密比较容易破解,不安全.所以在特殊需要下,会对磁盘进行加密,磁盘加密后在磁盘损坏的同时,其中的数据也会损坏, ...
- Centos7安装mysql8教程
网上的教程很多,我也参考了很多,以下是我实践的步骤,真实有效. 1．配置Mysql 8.0安装源: sudo rpm -Uvh https://dev.mysql.com/get/mysql80-co ...