after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}
after{
content:".";
display:block;
height:0;
overflow:hidden;
clear:both;
visibility:hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.header,.footer{
height: 200px;
background-color: rgb(202, 199, 199);
}
.section{
min-height: 300px;
}
</style>
</head>
<body>
<div class="header">
<h1>头部</h1>
</div>
<div class="section">
<h1>主体</h1>
</div>
<div class="footer">
<h1>尾部</h1>
</div>
</body>
</html>
<style>
body,div{
margin:0;
padding:0;
color:#f00;
}
.top{
background:#36c;
height:100px;
}
.main{
background:#f90;
width:100%;
position:absolute;
top:100px;
bottom:0;
}
</style>
</head>
<body>
<div class="top">wo shi top</div>
<div class="main">wo shi main</div>
</body>
<script type="text/javascript">
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><div id="root">
<header>
test
</header>
<main>
content
</main>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.red {
height: 200px;
background-color: rgb(151, 45, 45);
}
.green {
background-color: rgb(13, 226, 13);
height: calc(100% - 200px);
}
</style>
</head>
<body>
<div class="red">
红色
</div>
<div class="green">
绿色
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS两列高度自适应，右边自适应</title> <style> html,body{ width:100%; height:100%; } body,div{ margin:0; padding:0; } /* 这里之所以给margin-150px是为了减轻底部盒子的高度，不然盒子100%了 */ #box{ width:100%; height:100%; margin-top:-150px; } /* 浮动 */ #box .left{ float:left; width:300px; height:100%; margin-right:10px; background-color:red; } /* 利用前面的盒子浮动不占据位置，然后在通过overflow：hidden将两个盒子独立出来。 */ #box .right{ overflow:hidden; height:100%; background-color:pink; } #footer{ position:absolute; bottom:0; left:0; width:100%; height:150px; background-color:#ccc; } </style> </head> <body> <div id="box"> <div class="left"></div> <div class="right"></div> </div> <div id="footer"></div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100%;
height: 62px;
background: #232323;
}
p{
height: 30px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div>
<p>logo</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一列布局</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}/*这里是关键*/
#layout {
background-color: #cccccc;
/*border: 2px solid #333333;*/
margin: 0 auto;
width: 80%;
height: 100%;
}
</style>
</head>
<body>
<div id="layout"></div>
</body>
</html> // 默认为YES
@property(nonatomic) BOOL autoresizesSubviews;
// 默认为UIViewAutoresizingNone
@property(nonatomic) UIViewAutoresizing autoresizingMask;import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
// 设置表格高度
const doResize = async(el, binding, vnode) => {
// 获取表格Dom对象
const { componentInstance: $table } = await vnode
// 获取调用传递过来的数据
const { value } = binding
if (!$table.height) {
throw new Error(`el-$table must set the height. Such as height='100px'`)
}
// 获取距底部距离(用于展示页码等信息)
const bottomOffset = (value && value.bottomOffset) || 30
if (!$table) return
// 计算列表高度并设置
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
$table.layout.setHeight(height)
$table.doLayout()
}
export default {
// 初始化设置
bind(el, binding, vnode) {
// 设置resize监听方法
el.resizeListener = async() => {
await doResize(el, binding, vnode)
}
// 绑定监听方法到addResizeListener
addResizeListener(window.document.body, el.resizeListener)
},
// 绑定默认高度
async inserted(el, binding, vnode) {
await doResize(el, binding, vnode)
},
// 销毁时设置
unbind(el) {
// 移除resize监听
removeResizeListener(el, el.resizeListener)
}
}```swift
let label = UILabel()
label.numberOfLines = 0 // 设置为0表示支持多行显示
label.translatesAutoresizingMaskIntoConstraints = false // 关闭自动布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.0" />
<ImageView
android:id="@+id/ivCursor"
android:layout_width="60dp"
android:layout_height="5dp"
android:scaleType="fitCenter"
android:src="@drawable/cursor" />
<LinearLayout
android:id="@+id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>.clear_fix:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear_fix{
zoom:1;
} .clear_fix:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}.clear_fix{zoom:1;} <ImageView
android:id="@+id/img_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="@drawable/img_bg" />private void setHeights() {
ListAdapter adapter = getAdapter();
if(adapter != null) {
for(int i = 0; i < getChildCount(); i+=numColumns) {
// Determine the maximum height for this row
int maxHeight = 0;
for(int j = i; j < i+numColumns; j++) {
View view = getChildAt(j);
if(view != null && view.getHeight() > maxHeight) {
maxHeight = view.getHeight();
}
}
}
}
}
再次讲解一下，numColumns为一行有几个，i+=numColumns为一次增加一行的数量，然后再遍历每一行子view，获取最大高度maxHeight高度，deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px<divclass="resp-container">
<iframeclass="resp-iframe"src="https://www.youtube.com/embed/dQw4w9WgXcQ"gesture="media"allow="encrypted-media"allowfullscreen></iframe>
</div>
