HTML标签根据浏览器窗口大小自适应

1.使用calc实现自适应（需要父盒子宽高固定）

<style>*{margin: 0;padding: 0;}html, body {height: 100%;}.container {height: 100%;width: 100%;background-color: bisque;}.top {height: 100px;background-color: skyblue;}.middle {width: 100%;height: calc(100% - 200px);background-color: aquamarine;}.middleTop {width: 100%;height: 66px;background-color: aliceblue;}.middlebottpm {width: 100%;height: calc(100% - 66px);background-color: red;}.bottom {height: 100px;background-color:pink;}</style><div class="container"><div class="top"></div><div class="middle"></div><div class="bottom"></div>  </div>

2.使用flex布局，两栏布局，三栏布局

/*两栏布局*/
<style>*{margin: 0;padding: 0;}.box {height: 1000px;display: flex;}.left {width: 100px;height: 100%;background-color: aqua;}.right {height: 100%;flex: 1;background-color: silver;}
</style>
<body><div class="box"><div class="left"></div><div class="right"></div></div>
</body>

/*三栏布局*/
<style>*{margin: 0;padding: 0;}.box {height: 1000px;display: flex;}.left {width: 100px;height: 100%;background-color: aqua;}.middle {height: 100%;flex: 1;background-color: skyblue;}.right {height: 100%;width: 100px;background-color: silver;}
</style><div class="box"><div class="left"></div><div class="middle"></div><div class="right"></div></div>

文章就到这里啦，本人功力尚浅，若有不妥之处请谅解指正，谢谢！

HTML标签根据浏览器窗口大小自适应相关推荐

Echarts图表大小自适应浏览器窗口大小
1.mixins文件:resize.js // 当调整浏览器窗口大小时,发生 resize 事件:监听resize,实现Echarts图表大小自适应浏览器窗口大小 export default {da ...
jsplumb当浏览器窗口大小变化时，自适应（重新绘制端点和连线）
使用场景最近有个需求是绘制一个ER图,将关系图上的节点或者边的属性与数据表中的字段进行映射配置. 可能是我的容器container的宽高不是px,而是百分比或者vw,vh之类的.当浏览器窗口大小变化 ...
函数语法：JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转载）...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
JS 获取浏览器窗口大小
JS 获取浏览器窗口大小 <script>// 获取窗口宽度if (windows.innerWidth) {winWidth = windows.innerWidth;} else if ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
html5新特性移除哪些,html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？...
新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(a ...
【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
当浏览器窗口大小改变时，设置显示内容的高度
1 window.οnlοad=function(){ 2 changeDivHeight(); 3 } 4 //当浏览器窗口大小改变时,设置显示内容的高度 5 window.οnresize=fun ...

HTML标签根据浏览器窗口大小自适应

HTML标签根据浏览器窗口大小自适应相关推荐

最新文章

热门文章