全屏布局

全屏布局就是指html页面铺满整个浏览器窗口,并且没有滚动条,而且还可以跟随浏览器的大小变化而变化

<header></header>
<div class="content">
   <div class="left"></div>
   <div class="right"></div>
</div>
<footer></footer>
html,body{
   margin: 0;
   overflow:hidden;
}

header{
   height: 100px;

   position: fixed;
   top:0;
   left: 0;
   right: 0;
   background-color: lightgray;
}

.content{
   position: fixed;
   left: 0;
   right: 0;
   top: 100px;
   bottom: 100px;

   overflow: auto;
}

.content .left{
   width: 300px;
   height: 100%;
   position: fixed;
   left:0;
   top: 100px;
   bottom: 100px;
}

.content .right{
   height:1000px;
   margin-left:300px;
} 

footer{
   height: 100px;
   position: fixed;
   bottom:0;
   left:0;
   right:0;
   background-color: lightgray;
}

原文地址:https://www.cnblogs.com/qjb2404/p/12417031.html

时间: 2024-10-09 19:49:02

全屏布局的相关文章

CSS全屏布局的5种方式

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结 前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的5种思路 思路一: float [1]float + calc 通过calc()函数计算出.middle元素的高度,并设置子元素高度为100% <style> body,p{margin: 0;} body,html,.parent{height: 100%;} .middle{

iOS 全屏布局

edgesForExtendedLayout属性用于替代wantsFullScreenLayout,控制页面显示的范围,默认值是UIRectEdgeAll automaticallyAdjustsScrollViewInsets:通常我们希望ScrollView或者UITableView内容显示是在UINavigation Bar下面.iOS7以后,默认值是Yes,所以是全屏显示,但是要注意一点,ScrollView要作为控制器的根视图(PS:使用xib布局时似乎不是根视图也可以),automa

CSS+DIV两栏式全屏布局

在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <meta http-equiv=&quo

布局解决方案之全屏布局

方案1:Position CSS代码: 1 html,body,.parent{ 2 height: 100%; 3 overflow: hidden; 4 } 5 .top{ 6 position: absolute; 7 height: 100px; 8 top: 0; 9 left: 0; 10 right: 0; 11 background-color: green; 12 } 13 .left{ 14 position: absolute; 15 width: 200px; 16 to

网页js,DIV全屏布局

<script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); function findDimensions(){ var h = document.documentElement.clientHeight-120; $("#maincontent").css("height",h); } window.onresize=find

纯CSS 实现DIV 高度 height 100% 全屏布局

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0;

android 软键盘在全屏下的布局计算问题

在非全屏模式下,将activity的windowSoftInputMode的属性设置为:adjustResize.同时在View的onSizeChanged(int w, int h, int oldw, int oldh)里可以得到变化后的尺寸,然后根据前后变化的结果来计算屏幕需要移动的距离. 但是在全屏模式下,即使将activity的windowSoftInputMode的属性设置为:adjustResize.在键盘显示时它未将Activity的Screen向上推动,所以你Activity的

全兼容的全屏自适应布局

1.原理 body, html高度等到全屏高度 使用position:absolute;的方式来定义最外层的div, 内层的div 可以通过height:100%来渲染高, 这样就可以说不用在js的帮助下来实现全立屏的自适应布局 关于兼容 ie6 采用让body的上内边距等到 top 层的高度, 下内边距等到 bottom 层的高度, 通过这样的效果达到中间层高度等height:100%的效果 内层 inner-box 的高度在 ie67 无法实现height:100%的效果, 因为如果在 ie

自定义MediaController来实现修改底部布局作以及实现vedioview半屏与全屏的切换

因为直接使用系统vedioview,底部的MediaController布局有点不好看,尤其是进度条,不能实现办半屏与全屏的切换,自己网上看了下别人的资料,整理了下,做以笔记:初学者,勉强才实现这些功能,还有许多地方不明白. 看下效果:                    1,MediaController.java.直接复制下系统源码的MediaController,来进行修改,就两个地方,一个布局相关的修改,以及进度条ProgressBar的修改,然后就 是添加了半屏与全屏的切换接口. /