三段式高度自适应页面布局

最新推荐文章于 2024-05-17 22:22:40 发布
最新推荐文章于 2024-05-17 22:22:40 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： 开发知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjie617/article/details/50983224
版权 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="fe-lib/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        html,body{
            height:100%;
            padding:0;
            margin: 0;
            background: gray;
        }

        .pageContainer{
            min-height: 100px;
            width: 1000px;
            margin: 0 auto;
        }
        .pageHeader{
            height: 100px;
            width: 100%;
            background: blue;
        }
        .pageMain{
            background: red;
        }
        .pageMain p{
            margin: 0;
            padding: 0;
        }
        .pageFooter{
            background: green;
            height: 100px;
            width: 100%;
        }

        .fixScreenBottom{
            position: fixed;
            bottom: 0;
        }

        .fixScreenTop{
            position: fixed;
            top: 0;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $(window).on("resize",pageMainResize);
            pageMainResize();
            function pageMainResize(){
                var totalHeight = $(window).height(),
                    headerHeight = $(".pageHeader").height(),
                    footerHeight = $(".pageFooter").height();

                //清除前次设置.pageMain的高度
                $(".pageMain").css("height","");
                var mainHeight = $(".pageMain").height(),
                    isFull = (totalHeight <= (headerHeight + footerHeight + mainHeight));

                if(!isFull){
                    $(".pageMain").height(totalHeight - headerHeight - footerHeight);
                }
            }
        });
    </script>
</head>
<body>
<div class="pageContainer">
    <div class="pageHeader fixScreenTop"></div>
    <div class="pageMain">
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p><!--
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
        <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>
         <p>sldfjgldfg</p>-->
    </div>
    <div class="pageFooter fixScreenBottom"></div>
</div>
</body>
</html>

zhangjie617
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html高度自适应三种经典布局
08-03
html高度自适应三种经典布局
三段式页面
anzhuangguai的专栏
11-05 1536
WEB界面设计 三段式页面，包括 头部 内容 脚部 头部是标题和快捷方式 内容为可滚动式框架 脚部类似头部，放置提示信息，类似状态栏。 脚部如果使用固定格式，有可能遮盖内容部分。 可以在内容部分中通过css加以限制(FIXME) 使用 body:       padding-bottom:70px; //向下的空白长度为70像素 表示要和底边的间隔是7
js---三元表达式详解
最新发布
Li370234940的博客
05-17 483
以上代码的意思是：当flag的值为true时，返回一个匿名函数，并输出字符串'flag is true.'；以上代码的意思是：当水果类型为苹果时，如果尺寸为big，返回10元，否则返回8元；通过以上示例，我们可以看到在JS中，三元表达式具有非常高的灵活性和可扩展性，可以用于各种场合，有效地提高代码的可读性和开发效率。以上代码的意思是：如果判断结果为真，则返回字符串'yes'；其中“条件”可以是任意的JS表达式，“结果1”和“结果2”也是任意JS表达式，可以是字符串、数字、函数等任意类型的值。
html三段式布局,三段式div布局（左固定右自适应）
weixin_31832223的博客
06-17 709
目的：界面上模仿简书的主界面布局。即一个大的Navigation包含左边一个primary nav，右边一个middle。一个Main div为内容显示区域，宽度高度均可自适应。如下图：2016-09-13_183701.png2016-09-13_183744.png要点：固定不可滑动添加：position: fixed;nav div靠左边添加：left: 0px;top: 0px;右边的ma...
HTML5 - 经典的上中下三段式布局（并使用<nav>实现侧边导航链接）
热门推荐
u014063717的博客
03-17 1万+
这个是一个典型的三段式部局，上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。1，效果图如下： 2，页面元素说明： （1）在最外层我们添加了一个wrapper，把所有的页面元素都包在里面。好处是便于调整整个页面的最大最小宽度，以及是否让页面居中等。 （2）中间区域，侧边栏是固定宽度，右侧内容区域是自适应宽度。 （3）过去我们会把整个侧边栏都放在一个<div>中
网页导航条布局
sally820的博客
10-26 1456
一般浏览网页时导航条一般都是固定在顶部的，但是使用position:fixed属性时，接下去网页中的内容就会从屏幕最顶部开始布局，这就不合常理了，那么如何解决这个问题呢？ 1.网页界面内容 //img-responsive是bootstrap里面定义的css样式，如需使用可以引入bootstrap的css样式 2.样式 .driveProcedure{ p
EasyUI布局 高度自适应
11-22
其中一个就是datagrid不能很好的布局。想了好多办法都有局限。最后想到会不会是布局的问题，经过实践，最后问题解决。 1：比如在项目中用到了datagrid。如果界面比较简单－－－只有一个datagrid只需要把它的属性fit ...
脚本控制三行三列自适应高度DIV布局
10-31
脚本控制三行三列自适应高度DIV布局
脚本控制三行三列自适应高度DIV布局的代码
10-30
脚本控制三行三列自适应高度DIV布局的代码 在这个资源中，我们可以学习到以下几点知识： 1. DIV 布局的概念：DIV 是 HTML 中的一种基本结构元素，用来定义文档中的一个division или节。在这个例子中，我们使用 ...
angularjs 页面自适应高度的方法
10-18
在AngularJS开发中，页面自适应高度是一个常见的需求，特别是在构建响应式布局或者单页应用(SPA)时，为了提供良好的用户体验，需要确保内容区域能够根据浏览器窗口的大小自动调整高度，以避免出现滚动条或者空白区域...
IT 移动端：足迹第三十五步：静态、自适应、流式、响应式四种HTML网页布局的区别（哪种布局在移动端最好用）
原玉辉的博客
06-22 429
1）静态布局：在PC端与移动端用2个布局；一个元素的位置和大小都不变化； 2）自适应布局：在PC端与移动端用2个布局；一个元素的位置会变化。 3）流式布局：在PC端与移动端1个布局；元素的位置会变化，元素的大小会缩放；(图片太大会不显示) 4）响应式布局：在PC端与移动端2个布局；元素的位置会变化，元素的大小会缩放； <!doctype html> <html lan...
前端面试 关于三列布局 全集
前端小愤青
07-10 421
文章目录中间固定 两边自适应float +负marginflex 布局实现等宽等间距三列布局采用 flex采用 float采用 margin calc 计算属性中间自适应布局 中间固定 两边自适应 描述：现在有三列 a、b、a;其中它们高度一定、b宽度200px,让a自适应 该如何做？ float +负margin <section class="layout-float"> ...
html三段式布局,移动端 三段式布局 （flex方式）
weixin_36331336的博客
06-17 1616
分享一种平时用的三段式布局(flex)主要思路是 上中下 header&footer 给高度 main 占其余部分html 部分css 部分.wrap{display: flex; //弹性盒子flex-direction:column; //垂直排列height: 100%; //容器盒子要有高度.header{height: .48rem;}.main{flex:...
纯CSS实现横纵向三段式布局
weixin_42863256的博客
10-13 1285
主要是实现 首尾固定 中间自适应 以及 左右固定 中间自适应的布局。 横向三段式主要采用flex，纵向三段式采用position：absolute布局。 最终实现效果 <!DOCTYPE html> <html> <style type="text/css"> body,html{ height:100%; margin:0; } .page{ height: 100%; margi
【ArcGIS微课1000例】0036：分式标注案例教程
「 刘一哥与GIS的故事」
10-19 2317
右键数据图层→符号系统，打开符号系统对话框，住符号系统选择【唯一值】，字段1选择NAME。，其中，[OLD]为分子部分对应的属性，[name]为分母部分对应的属性。双击打开图层属性，切换到【标注】选项卡，点击【标注字段】后的【表达式】。需要确定一个分式表达式，
前端学习第十六课（响应式布局与自适应布局）
damadashen的博客
01-17 3415
1、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。 1.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能..
android 三层布局,android常用布局样式上、中、下三层
weixin_42501631的博客
05-26 203
我们在常用开发中经常用到一种布局结构，就是类似网页的页头、中间内容、页尾，下面我们就来看看在android中是怎样布局的。 xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainA...
js 三级运算表达式运用
qq_42174597的博客
10-28 382
1.动态样式里 三级表达式的写法 <li v-for="(item, index) in listData" :key="index"> <div class="ww"> <div class="ee"> //不同字段表示不同颜色 <p class="title2" v-text="item.riskgrade" v-bind:clas..
javascript三元表达式
老段的CSDN的博客
01-23 9121
javascript三元表达式 1、一元表达式是 ：10 2、二元表达式是 ： 3+5 3、三元表达式是 ： ？ ： 废话不多说 上代码 总结 ： 三元表达式就是简化版的if 再来一个三元案表达式的案例 问题是：数字补0 用户输入数字，如果数字小于10，前边自动补0，比如 01,09，如果数字大于10，就不需要补，如20,22,。 问题解析： 1、用户输入一个数字 2、如果数字小于10，则在这个数字前面补0，否则，原数输出 3、用一个变量接受这个返回值，输出 ...
echarts怎么能自适应页面布局
05-30
要让 Echarts 图表自适应页面布局，可以通过以下几个步骤实现： 1. 设置容器的宽高为百分比值，而不是固定像素值。这样容器的大小会随着页面布局的变化而自适应调整。 2. 在 Echarts 初始化时，设置 option 中的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值