实现高度自适应铺满整屏的效果，在网页设计中非常常见，可以通过CSS样式来完成。具体步骤如下：
1、设置html和body的高度为100%
在CSS中设置html和body的高度为100%，这样可以保证整个网页的高度占据整个屏幕。
html, body {
height: 100%;
}
2、设置目标元素高度
将目标元素设置为高度100%是无效的，因为在默认情况下，其父元素高度等于内容高度。因此可以将其父元素也设置成高度100%，然后再将目标元素的高度设置为100%：
body {
margin: 0;
padding: 0;
}
#target {
height:100%;
}
示例1
<!DOCTYPE html>
<html>
<head>
<title>高度自适应示例</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#target {
height: 100%;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div id="target"></div>
</body>
</html>
示例2
<!DOCTYPE html>
<html>
<head>
<title>高度自适应示例</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#parent {
height: 100%;
background-color: #eee;
}
#target {
height: 100%;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div id="parent">
<div id="target"></div>
</div>
</body>
</html>
以上示例中，第一个示例中只设置了目标元素的高度，第二个示例中，则将目标元素父元素也设置为了高度100%。
通过以上步骤，即可实现高度自适应铺满整屏的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS 实现高度自适应铺满整屏的实现 - Python技术站
微信扫一扫 
支付宝扫一扫 