自适应 | 易学教程

自适应布局

阅读更多关于自适应布局

宽高自适应宽度自适应元素宽度设置为100%。（块元素宽度默认为100%）高度自适应设置方法：html,body{height:100%;} 自适应元素高度：height:100%; 动态计算高宽公式:例width:calc(100% - 100px)😭-号左右留空) 非浮动元素的父元素,高度的自适应 hack1: height:auto; 或不写height属性； hack2: min-height:value;_height:value; _下划线过滤器只有IE6识别 hack3: min-height:200px; height:auto !important; height:200px ！important; 关键字过滤器他表示所附加的声明具有最高优先级的意思，但由于IE6及更低版本不能识别他，我们可以利用IE6 这个bug作为过滤器来兼容IE6和其他标准浏览器；语法：选择符{属性:属性值 !important；} 注：同时设两个高度，优先级声明的属性要放到前面。 min-height（最小高度） max-height(最大高度) min-width(最小宽度) max-width(最大宽度) IE6不支持该组属性；浮动元素的父元素高度自适应（高度塌陷） hack1：隐藏法给父元素添加声明overflow:hidden; hack2:

html背景图片自适应

阅读更多关于 html背景图片自适应

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" > < title > hello world </ title > </ head > < body > < div id ="Layer1" style ="position:absolute; width:100%; height:100%; z-index:-1" > < img src ="pictures/background.jpg" height ="100%" width ="100%" /> </ div > </ body > </ html > 转载于:https://www.cnblogs.com/BrightMoon/p/3957864.html 来源： https://blog.csdn.net/weixin_30323961/article/details/99149344

iframe高度自适应

阅读更多关于 iframe高度自适应

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe高度自适应。 js代码 function setIframeHeight(iframe) { 　　if (iframe) {　　　　/*　　　　　　contentDocument是获得iframe子窗口的document对象，兼容Firefox和ie8+　　　　　　contentWindow是获得子窗口的window对象，兼容大部分浏览器　　　　*/ 　　　　var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; 　　　　if (iframeWin.document.body) { 　　　　　　iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; 　　　　} 　　} }; //获取子页面的高度 window.onload = function () { 　　setIframeHeight(document.getElementById('external

CSS3自适应布局单位 —— vw,vh

阅读更多关于 CSS3自适应布局单位 —— vw,vh

1. 什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 2. 视口单位vw，vh 视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport。根据CSS3规范，视口单位主要包括以下4个： 1. vw：1vw等于视口宽度的1%。 2. vh：1vh等于视口高度的1%。 3. vmin：选取vw和vh中最小的那个。 4. vmax：选取vw和vh中最大的那个。 vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 3. calc()的使用 calc(expression) 是css3的一个新增的功能，用来指定元素的长度。 calc()能给border、margin、pading、font-size和width等属性设置动态值，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)” calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和

文本框自适应高度，当达到一定行数时就自动增加滚动条

阅读更多关于文本框自适应高度，当达到一定行数时就自动增加滚动条

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div模拟textarea文本域轻松实现高度自适应</title> <style> h2 { text-align: center; margin: 50px auto; } .test_box { width: 400px; min-height: 20px; /*设置最小高度*/ max-height: 500px; /*设置最大高度超过300px时出现滚动条*/ _height: 120px; margin-left: auto; margin-right: auto; padding: 13px; outline: 0; border: 1px solid #a0b3d6; font-size: 16px; line-height: 24px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); } </style> </head>

Javafx实现同一面板切换页面，及使用Hbox和VBox实现自适应

阅读更多关于 Javafx实现同一面板切换页面，及使用Hbox和VBox实现自适应

最近公司项目要用到JAVAFX,于是便去学习了一下JAVAFx,期间遇到了同一面板切换页面及自适应的问题，在此与大家分享一下。首先是javafx一目了然的目录结构。在这里推荐大家使用Scene Builder 可视化工具打开fxml文件进行javafx界面设计，如图，是用Scene Builder 打开的fxml文件我们采用VBox进行布局，以便实现自适应。然后依次在VBox布局中添加HBOX,Flowpane,vbox进行模块划分，如图所示（**注意，要在工具右边栏设置flowpane和vbox的vgows为aways以便实现自适应。*）然后在flowpane中添加两个按钮接下来我们保存返回。打开fxml文件，找到我们要进行切换的vbox,然后在下方copy粘贴。如图。（注意，务必给下方的vbox设置managed=“false” visible=“false”，使其不可见）然后我们只需给按钮添加点击事件，类似于css设值div的隐藏及展示一样设置managed=“false” visible="false"即可，如下图到这里我们就已经初步完成了javafxf同一面板切换页面的效果了，大家可以在controllert中再对其写相应的逻辑判断，实现更多的功能。See you ! 来源： https://blog.csdn.net/qq_42631041

iframe高度自适应内容

阅读更多关于 iframe高度自适应内容

JS 自适应高度，其实就是设置 iframe 的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过 CSS 来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 iframe 内容未知，高度可预测这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用 javascript 改变高度。常用的兼容代码有： // document.domain = "caibaojian.com"; function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } }; window.onload = function () { setIframeHeight(document

iframe高度自适应的方法

阅读更多关于 iframe高度自适应的方法

JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 iframe内容未知，高度可预测这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用javascript改变高度。常用的兼容代码有： function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight; } } }; window.onload = function() { setIframeHeight(document.getElementById('iframe-frame')); }; <iframe src=

Iframe高度自适应（兼容IE/Firefox、同域/跨域）

阅读更多关于 Iframe高度自适应（兼容IE/Firefox、同域/跨域）

看转贴吧但是需要说明的是，就是大家不要以为可以用这种方法来控制别人的网页，不行的这个跨域虽说域名不一样，但必须都是你的，也就是你可以修改的才行，这个跨域这种方法可以实现，但是如果是别人的网页，你不能修改就不行了在实际的项目进行中，很多地方可能由于历史原因不得不去使用iframe，包括目前正火热的应用开发也是如此。随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。同域时Iframe高度自适应下面的代码兼容IE/Firefox浏览器，控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然后在主页面进行设置来实现。代码如下，可复制。另外，请注意此解决方案仅供同域名下使用。 <script type = "text/javascript" > function SetCwinHeight (){ var iframeid = document . getElementById ( "iframeid" ); /

页面两栏布局（草稿）

阅读更多关于页面两栏布局（草稿）

一边整理一边记忆学习： https://blog.csdn.net/baidu_36065997/article/details/80279305 4种情况：一栏定宽一栏自适应一栏不定宽一栏自适应两栏等高左右宽度比 1:2，右边分上下结构，高度比 1:1 左侧定宽，右侧自适应方法一：设置两个高度相同；左边 float：left，设置宽度a 右边不设置宽度，但 margin-left：a （块级元素流式特性）方法二：设置两个高度相同；左边 float：left 右边 overflow：hidden（用 overflow：hidden触发的 bfc 清除左边产生的浮动影响）（作者下面的话我觉得更好理解：原话——不与浮动元素交集，自动退到浮动元素宽度之外）作为普通元素的流体特性依然存在，反映在布局上就是自动填满除去浮动内容以外的剩余空间。如果右边宽度固定，左边宽度自适应，那 html 结构该是右边div 先写方法三：给两个 div 加上wrapper wrapper 相对定位，左边设置定宽a，右边绝对定位，top、right都是0，left 是a 来源： https://blog.csdn.net/from_shanghai/article/details/98482489

订阅自适应