前端学习（539）：全屏布局得实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全屏布局</title><style>html,body{margin: 0;}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;background-color: aqua;overflow: hidden;}.content .left{width: 300px;height: 100%;position: fixed;left: 0;top: 100px;bottom: 100px;background-color: bisque;}.content .right{margin-left: 300px;height: 100px;background-color: green;}footer{height: 100px;position: fixed;bottom: 0;left: 0;right: 0;background-color: lightgray;}</style>
</head>
<body><header></header><div class="content"><div class="left"></div><div class="right"></div></div><footer></footer>
</body>
</html>

运行结果

前端学习（539）：全屏布局得实现相关推荐

Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局水平居中子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
去掉ios7的全屏布局
前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...
html 布局满屏,CSS全屏布局的5种方式
前面的话全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的5种思路思路一: float [1]float + calc 通过calc()函数计算出.middle元素 ...
mysql cmd全屏_CSS全屏布局的5种方式
思路一: float [1]float + calc 通过calc()函数计算出.middle元素的高度,并设置子元素高度为100% overflow: hidden; height: calc(10 ...
CSS全屏布局的6种方式
1.float [1]float + calc 通过calc()函数计算出.middle元素的高度,并设置子元素高度为100% <style> body,p{margin: 0;} bod ...
android studio 全屏布局中，横竖屏使用不同布局失效问题
最近在做一个小东西,使用的是全屏布局,但横竖屏显示布局不同,之前做的是一个横屏布局,竖屏的时候显示的乱七八糟.如图: 横屏: 竖屏: 后来重新做了一个竖屏布局,并按照网上的方法进行设置,使横竖屏加载不 ...
IPhoneX网页布局全屏布局（转）
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试. ...
前端jQuery的全屏滚动插件（使用方法）
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
前端vue实现全屏和按esc退出全屏功能
效果如下: 不多说,直接上代码如下,复制即可使用,注意图片位置修改即可: 1.vue页面中根据是否全屏判断当前显示图片或icon图标,isFullScren为true时表示全屏,默认值为false,并 ...

前端学习（539）：全屏布局得实现

前端学习（539）：全屏布局得实现相关推荐

最新文章

热门文章