微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

如何设置div的宽度，使其布满屏幕_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:28:13
原创
2130人浏览过

因为不同的电脑，或者平板手机等的屏幕大小不一样，所以希望可以得到一个比较好的方案，是div在不同的设备上，有不同的宽度和高度。应该如何实现呢？
有两个思路，一个是通过css中的宽度和高度百分比，来弄，但是设置了width:100%和height:100%以后，并没有什么效果。还一个是想通过javascript获取屏幕的宽度和高度，然后在js中修改div的宽度和高度的属性（css是采用的链接的方式）.
但比较悲催的是，两个目前都木有成功~求大神支援、、

MindShow
MindShow

MindShow官网 | AI生成PPT，快速演示你的想法

MindShow 1492
查看详情 MindShow


回复讨论(解决方案)

楼上正解 

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：设置元素背景透明度_html/css_WEB-ITnose 下一篇：在webstorm设置File watcher for Jade_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
解决 Nginx 自定义 400 错误页面资源加载失败的问题 (SSL) 本文旨在解决在使用Nginx配置自定义400错误页面时，当用户通过HTTP访问HTTPS端口导致资源加载失败的问题。我们将分析问题原因，并提供配置Nginx以正确处理HTTP和HTTPS请求的解决方案，确保自定义错误页面能够正常显示。通过配置default_server，我们可以有效地管理所有进入服务器的请求，并提供一致的用户体验。
2025-11-22 09:45:06
569
CSS min-height：实现父元素在内容溢出时自适应增长的策略 本文探讨了在使用CSS布局时，父元素高度固定（如height:100vh）导致子元素溢出的常见问题。针对这一挑战，我们提出并详细解释了使用min-height属性作为解决方案。通过设置最小高度，父元素既能保持其预设的初始尺寸，又能智能地根据内部内容需求自动扩展，有效避免内容溢出，确保页面布局的灵活性和健壮性。
2025-11-22 09:38:02
857
JavaScript键盘事件控制页面自动滚动教程 本教程详细讲解如何利用JavaScript键盘事件精确控制页面自动滚动。通过引入布尔状态变量和keydown事件监听器，实现按下特定键启动滚动、按下另一键停止滚动的功能，同时提供完整的代码示例和实践注意事项。
2025-11-22 09:12:20
735
修复Bootstrap可折叠菜单失效问题的全面指南 本文旨在解决Bootstrap可折叠（collapsible）菜单在响应式设计中无法正常展开的问题。我们将深入探讨导致此类故障的常见原因，包括jQuery和BootstrapJavaScript文件引入错误、版本不兼容以及HTML数据属性配置不当。通过提供正确的脚本引入方式、兼容性建议和详细的HTML结构示例，本教程将帮助开发者有效诊断并修复可折叠菜单功能，确保其在不同屏幕尺寸下稳定运行。
2025-11-22 08:48:20
529
CSS选择器：根据子元素文本内容选择父元素的替代方案 本文探讨了纯CSS无法直接根据子元素的文本内容选择并修改其父元素样式的问题，并提供了两种主要替代方案。首先，介绍了在特定布局下利用CSS结构性伪类选择器（如:first-of-type）的局限性方法。其次，详细阐述了如何通过JavaScript或jQuery的:contains()选择器实现基于文本内容的动态样式调整，为开发者提供了处理此类场景的实用指南。
2025-11-22 08:44:21
449
如何在JavaScript中生成满足X > Y条件的两个依赖随机数 本教程详细介绍了如何在JavaScript中生成两个相互依赖的随机数x和y，并确保x始终大于y。文章通过定义一个通用的随机数生成函数，并演示了如何巧妙地利用该函数，先生成较小的数y，然后以y为基准（y+1）生成较大的数x，从而实现这种特定的依赖关系，确保结果的有效性和逻辑性。
2025-11-22 08:23:20
824
HTML文本框怎么插入_HTML文本框怎么插入并设置默认显示内容 使用input标签的value属性可设置文本框默认内容，如；结合name、placeholder等属性提升功能，value用于预填信息，placeholder用于输入提示。
2025-11-22 01:51:11
622
HTML图片布局怎么语义化_HTML图片在语义化布局中的使用与优化 正确使用HTML标签和属性实现图片语义化布局，可提升可访问性、SEO与代码维护性。1.内容型图片用配alt描述，如产品图；2.装饰性图片通过CSSbackground-image实现；3.复杂图表结合aria-describedby或figure与figcaption提供详细说明；4.响应式中利用srcset、sizes优化加载，配合loading="lazy"提升性能；5.优先使用WebP等现代格式并通过回退；6.alt文本需具体简洁，链接图片应描述目标行为；7.避免以图代文标题，确保结构清晰
2025-11-21 23:59:02
274
HTML语义化标签怎么选择_HTML不同场景下语义化标签的选用技巧 语义化标签通过明确内容角色提升可读性、可访问性与SEO，应根据内容独立性与功能选用article、nav、aside等标签，避免滥用div，合理嵌套并配合ARIA属性，确保结构清晰且符合实际需求。
2025-11-21 23:59:02
718
HTML文本换行符怎么处理_HTML文本换行符如何在代码与显示间正确转换 答案是使用标签或CSSwhite-space属性处理HTML换行。通过替换\n为实现换行显示，或用pre、pre-line、pre-wrap等CSS属性保留格式，用户输入需先转义再转换，确保安全与效果兼顾。
2025-11-21 23:58:02
487
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部