用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 ...
随机推荐
- Linux搭建DHCP服务器
Linux搭建DHCP服务器 实验目标: 通过本实验掌握基于Linux的DHCP服务器搭建技能. 本实验包含内容为yum的认识与使用,磁盘挂载的概念与使用,DHCP原理及配置,systemctl服 ...
- .NET Core学习笔记（1）——在Linux下运行Console APP
都说.NET Core可以跨平台,说实话Linux咱也不太懂,咱也不敢问.怎样把一个简单的Console App在Linux下跑起来,真是费了我一番功夫.特做此篇以供指北. .NET Core的大饼我 ...
- 通过Spring整合hibernate并进行单元测试(详细)
一. 没有基础hibernate基础的可以点击这里 ---------->ORM----hibernate入门Demo(无敌详细版) 这里我就不详细介绍了.. 二. hibernat.cfg.x ...
- idea-Java文件结构
从项目目录来看 ,分级为project-module-package-classname.java 其中.java文件中包含至多一个publicclass.class文件和多个普通.class文件 . ...
- [最全算法总结]我是如何将递归算法的复杂度优化到O(1)的
相信提到斐波那契数列,大家都不陌生,这个是在我们学习 C/C++ 的过程中必然会接触到的一个问题,而作为一个经典的求解模型,我们怎么能少的了去研究这个模型呢?笔者在不断地学习和思考过程中,发现了这类经 ...
- JAVA基础之JDK安装
JDK的安装与环境变量配置是JAVA开发之路的第一步,很多新人在这一步上就卡了很久,浪费了很多时间,甚至有些人就轻易地“从入门到放弃”了. 今天我们就来一步步教你如何打倒这第一只拦路虎. 1.JDK下 ...
- python安装及typora使用
第一章 环境搭建 1.1Python安装 1.1.1python官网www.python.org 1.1.2根据电脑系统选择下载 1.1.3确定电脑系统属性,此处我们以win10的64位操作系统为例 ...
- 个人永久性免费-Excel催化剂功能第17波-批量文件改名、下载、文件夹创建等
前几天某个网友向我提出催化剂的图片功能是否可以增加导出图片功能,这个功能我一直想不明白为何有必要,图片直接在电脑里设个文件夹维护着不就可以了么?何苦还要把Excel上的图片又重新导出到文件夹中?这个让 ...
- 博客一键保存本地exe可视化界面文件
说明 非常感谢nick老师的提点老师博客:https://home.cnblogs.com/u/nickchen121/ 项目连接 1.码云:https://gitee.com/wjup/html_t ...
- 2019牛客多校第二场H-Second Large Rectangle
Second Large Rectangle 题目传送门 解题思路 先求出每个点上的高,再利用单调栈分别求出每个点左右两边第一个高小于自己的位置,从而而得出最后一个大于等于自己的位置,进而求出自己的位 ...