css控制宽度（高度）自适应100%_背景图宽度100%,高度自适应资源-CSDN文库

共2个文件

html：2个

需积分: 50 65 浏览量 2015-03-04 15:44:02 上传评论 1 收藏 1KB RAR 举报

在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素外观、布局和结构的关键技术。本篇将详细讲解如何使用CSS来实现宽度和高度的自适应100%效果，以满足不同屏幕尺寸和设备的需求。 1. **宽度自适应100%** 宽度自适应100%通常用于让元素占据其父容器的全部宽度，从而在不同分辨率和屏幕尺寸下保持良好的视觉效果。以下是一个常见的例子，展示如何使多个div并排且宽度自适应100%： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; justify-content: space-between; } .fixed-width { width: 200px; /* 固定宽度的div */ } .flexible { flex: 1; /* 自适应宽度的div */ } </style> </head> <body> <div class="container"> <div class="fixed-width">左侧固定宽度</div> <div class="flexible">中间自适应宽度</div> <div class="fixed-width">右侧固定宽度</div> </div> </body> </html> ``` 在这个示例中，`.container` 使用 `display: flex;` 创建一个弹性布局容器，`justify-content: space-between;` 让子元素在容器中均匀分布，两侧的 `.fixed-width` divs 设置固定宽度，而中间的 `.flexible` div 使用 `flex: 1;` 来占据剩余的空间，实现了宽度自适应100%的效果。 2. **高度自适应100%** 高度自适应100%常用于实现全屏布局，例如“头、身体、脚”的页面结构。为了使元素高度填充整个屏幕，可以使用CSS的`vh`单位（viewport height，视口高度）： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; height: 100%; } .header, .footer { background-color: #f1f1f1; padding: 20px; text-align: center; } .content { background-color: #ffffff; padding: 20px; min-height: 100%; /* 保证内容区至少与视口高度相同 */ } </style> </head> <body> <div class="header">头部</div> <div class="content">主体内容</div> <div class="footer">底部</div> </body> </html> ``` 在这个例子中，`html` 和 `body` 的高度设置为100%，确保它们完全填充视口。`.header` 和 `.footer` 有固定的背景色和内边距，`.content` 区域使用 `min-height: 100%;` 确保至少占据整个视口高度，形成全屏布局。通过以上两种方法，我们可以灵活地利用CSS实现宽度和高度的自适应100%效果，为用户提供更好的浏览体验。在实际项目中，还可以结合媒体查询（Media Queries）进一步优化响应式设计，以适应不同设备和屏幕尺寸的需求。

资源推荐

资源详情

资源评论

收起资源包目录

自适应宽度高度.rar （2个子文件）

自适应宽度高度

水平.html 764B

垂直.html 825B

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>多个div，高度自适应100％</title> <style type="text/css"> *{margin: 0;padding:0} #wrapper div{ width: 100%; color:#fff; } .header {background:orange; height:50px; position: fixed;top: 0;} .header2{background:purple; height:50px; position: fixed;top: 50px;} .bodyer {background:silver; height:auto; position: fixed;top: 100px;bottom: 100px} .footer {background:orange; height:50px; position: fixed;bottom: 0} .footer2{background:maroon; height:50px; position: fixed;bottom: 50px} </style> </head> <body> <div id="wrapper"> <div class="header">脑袋瓜</div> <div class="header2">脑袋瓜2</div> <div class="bodyer">身体</div> <div class="footer">脚丫子</div> <div class="footer2">脚丫子2</div> </div> </body> </html>

评论收藏

内容反馈