用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 ...
随机推荐
- mount -- 挂载理解
1.挂载? 在windows操作系统中, 挂载通常是指给磁盘分区(包括被虚拟出来的磁盘分区)分配一个盘符. 第三方软件,如磁盘分区管理软件.虚拟磁盘软件等,通常也附带挂载功能. 在linux操作系统中 ...
- Linux搭建DHCP服务器
Linux搭建DHCP服务器 实验目标: 通过本实验掌握基于Linux的DHCP服务器搭建技能. 本实验包含内容为yum的认识与使用,磁盘挂载的概念与使用,DHCP原理及配置,systemctl服 ...
- PHP学习（1）
- redis整合springboot的helloworld
引入依赖 compile 'org.springframework.boot:spring-boot-starter-data-redis' 使用redis有两种方法 1.Jedis Jedis je ...
- HDU 5510：Bazinga（暴力KMP）
http://acm.hdu.edu.cn/showproblem.php?pid=5510 Bazinga Problem Description Ladies and gentlemen, p ...
- 从无到有构建vue实战项目（四）
六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...
- 最近学习了HBase
HBase是什么 最近学习了HBase,正常来说写这篇文章,应该从DB有什么缺点,HBase如何弥补DB的缺点开始讲会更有体感,但是本文这些暂时不讲,只讲HBase,把HBase相关原理和使用讲清楚, ...
- Windows 下配置 Logstash 为后台服务
到目前为止,logstash 没有给出官方的,在 windows 系统中作为后台服务运行的方式.本文将介绍如何使用第三方工具 nssm 让 logstash 作为后台服务运行在 windows 中.说 ...
- 基于C#的机器学习--微基准测试和激活功能
本章我们将学习以下内容: l 什么是微基准测试 l 如何将它应用到代码中 l 什么是激活函数 l 如何绘制和基准测试激活函数 每个开发人员都需要有一个好的基准测试工具.质量基准无处不在;你们每 ...
- seleniumGrid分布式远程执行测试脚本
执行UI自动化测试脚本时,不仅可以在本地执行,也可以远程指定某计算机执行测试脚本,seleniumGrid为我们提供了这类服务,但还需要自己搭建环境. 一.本地计算机需要准备java环境和seleni ...