解决div高度一窗口一样的问题

最新推荐文章于 2024-04-18 09:39:48 发布
最新推荐文章于 2024-04-18 09:39:48 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： HTML+CSS 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38544803/article/details/72845312
版权

众所周知，css中width：100%；会使div的宽度与窗口一样大小。然而在div的css中height：100%并不会。

这时只需要把body与html的高度也设置成100%就行了。

 html,body{height:100%;overflow:hidden;}

当然前提是这个div的父级是body，如果不是父级也要设置成height：100%


我刚刚开始学如果哪里理解错误或者不对请联系我，我会修改正回来，大神有更好的方法，也请告诉我。谢谢！！

程序侯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div或img图片高度随宽度自适应的方法
12-28
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） 行内元素垂直居中
HTML标签根据浏览器窗口大小自适应
wsdnnnnnnnnn的博客
02-06 4938
1.使用calc实现自适应 （需要父盒子宽高固定）2.使用flex布局，两栏布局，三栏布局。
HTML/CSS中，DIV高度自适应的解决方法
rainbow702的博客
07-07 646
在WEB开发过程中，有些需求要求DIV的高度随着浏览器窗口的改变而改变。 这里我就列举两种情况： ① 顶部为一排菜单栏，下部为内容部。其中，要求，菜单栏高度固定，内容部随着浏览器窗口大小的改变而改变，示意图如下：  这种需求的处理的话，可按照如下的CSS来处理： <div style="height: 100px; background: gray;"> menu ba...
如何将div盒子设置和浏览器一样的宽度和高度？附页面开关灯案例
weixin_46353030的博客
04-07 6993
今天做一个页面开关灯案例的时候遇见了以下问题： 不知道怎么将div盒子设置成和浏览器一样的宽度和高度； 开关灯按钮被覆盖了； 第一个问题的解决方案如下 <style> /* 将div的宽度和高度设置为100% */ div { width: 100%; height: 100%; background-color: #fff; } /* 同时还要修改body和html的宽度和高度 */ body,
为什么要在html和body加上“height:100%;”
weixin_34306593的博客
01-15 334
因为如果不加，那么body高度的值，就是页面所有元素所到达的高度。 可以给body加上一个背景颜色来查看效果，如果文件流不是很长，不至于占满整个窗口（未产生滚动条），那么可以看到背景颜色只是作用到文件流的末尾。 而给html的加上"height:100%;"这一样式，则指定了body的父元素高度为100%，再在body中指定heigh...
学习笔记（7):设置div高度与窗口界面等高
qq_43156197的博客
03-04 672
课程为零基础学习开发的学员而准备，无需任何基础，无任何专业限制，通通从零开始，由浅入深学习开发，每个知识点均有对应案例作为指导，通俗易懂，简单易学，易上手。课程经过长时间的经验总结，采取合理又容易和轻松上手的方式开展教学，再配合企业开发中实际遇到的案例作为练习，相当于直接参与企业开发，技能和经验同步获取。希望学习本课程的学员认真学习每一个课时的视频，跟着视频练习和做作业，只有多写多练才能灵活变...
让div高度跟随窗口高度自适应的方法
zhang197093的博客
04-18 5124
直接给div设置百分比高度样式，实际上并不会生效。 其实只需要加上以下css样式即可 html,body{ margin:0; padding:0; height:100% } 然后再设置div的样式： div{ height:100%; background:#93c; }
html如何讓div高度等於窗口高度,将div高度设置为窗口高度
weixin_35931648的博客
07-06 650
我正在使用ASP.NET模板并尝试将我的内容设置为占用窗口的整个高度，但我无法实现它。里面有一个容器和两个兄弟姐妹。将底部div设置为高度100％会导致容器溢出。将div高度设置为窗口高度我也使用Bootstrap。我只能将高度百分比降到较低的值，但没有更好的方法吗？ 我添加了一个屏幕截图和小提琴： http://jsfiddle.net/ob1g0752/HTML：testtestfooterC...
解决Vue中mounted钩子函数获取节点高度出错问题
11-30
遇到的问题 最近在开发一个Vue的项目，好几个...后来查到问题，就是加载的问题，新窗口打开图片，默认是没有带缓存的，图片是GET请求，是异步的，js运行的肯定比图片GET要快，所以当执行mounted钩子函数的时候，图片还
ie6 select无法被div遮盖的bug解决方法
09-22
使用div制作蒙版或模拟弹出窗口，但在IE6下，当div下方有下拉列表框select元素的时候，下拉列表框会划破div显示在div之上，不论z-index设为何值均会出现此问题，可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴...
CSS设计网页小技巧 100%的高度
09-25
在前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。今天，我将于你分享一下。
layui layer select 选择被遮挡的解决方法
01-21
解决方法：在页面里面找到对应div的class 给overflow新的属性visible即可(默认值。内容不会被修剪，会呈现在元素框之外。)即可显示出下拉框 1.找到层1 的overflow 属性, 修改成为visible. 2. 如果有层2, 就把层2的...
html如何设置div的高度与窗口相同,HTML / CSS：使两个浮动div具有相同的高度
weixin_36027743的博客
06-15 1145
您可以通过应用大量的底部填充，相同数量的底部负边距以及使用隐藏溢出的div围绕列来获得CSS中的相等高度列。垂直居中文本有点棘手，但这应该可以帮助你。#container {overflow: hidden;width: 100%;}#left-col {float: left;width: 50%;background-color: orange;padding-bottom: 500em;ma...
css开发技巧(1)_元素的高度与 window 的高度相同/使元素与窗口一样高
qq_26905813的博客
03-06 950
使用 height: 100vh; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html,body{ margin: 0; padding: 0; } .ceshi { width: 100%; height: 100
【CSS常用单位】
橙子的博客
06-16 533
在CSS中，单位分为相对单位和绝对单位两种：CSS中的相对单位主要分为两大类：em（Element meter）是一个相对单位，它有如下特点：(1)em参照的对象是其父元素的font-size，1em等于其父元素的font-size一倍,1em=16px； (2) em的具体值会出现嵌套计算的现象，如下面例子： rem（Root element meter）是一个相对单位，它有如下特点：(1)rem参照的对象是根元素html的font-size，1rem = 16px； (2)rem的具体值不会出现嵌套计
CSS专题（三）：页面高度发微
dazhatan9812的博客
08-14 172
一 背景 　　本文不讨论普通元素的大小和位置，仅仅讨论页面的大小和位置，而且为了简化问题，本文只讨论高度与顶部距离。笔者发现，页面的宽度与高度的表现有很多不同，细心的朋友会发现，故页面宽度另起文讨论，文章已经写好，见页面宽度发微。 　　这里说的页面高度，是指浏览器页面的高度。有以下四种元素能够表现页面的高度：window,html,document,body。这些元素的高宽常常不被人...
CSS设置元素高度占浏览器窗口宽度的100%
程麒阁的博客
07-15 6442
问题重述 height:100%这个用法只有在父容器有高度的情况下才可以使用过的，可是我们的body它的高度是自适应它里面元素高度的。 换句话说，通常body的高度并不是浏览器窗口高度的，所以你对下面的元素设置height:100%,并不能充满屏幕高度 那我们怎么解决呢，其实很简单。 请看代码： /*清除默认边距*/ *{ margin: 0; padding: 0; } /*设置html标签高度为100%，body高度为100%*/ html,body{ height: 100%; } html
怎样让一个div高度和浏览器高度一样
thewebcode
04-17 2054
这个老生长谈的问题，不知困扰了多少前端开发人员，和后端程序员，其实很简单，这里写出来，让大家分享下，有很多人说，我已经设置div 100%了，怎么还没效果，我想说的是，有一个关键的东东，你没设置，html,body{height:100%;overflow:hidden;}哈哈，这回你会了吧，要同时设置。...
前端开发攻略---合并表格单元格，表格内嵌套表格实现手风琴效果。
最新发布
nibabaoo的博客
04-18 527
合并表格单元格，表格内嵌套表格实现手风琴效果。
写一个vue可调整大小的div的代码
04-20
当然，我很乐意为您提供这个代码示例。 首先，您需要在Vue组件中创建一个可调整大小的div元素。您可以使用`resize`事件来监听div的宽度和高度的变化，并使用Vue的`data`选项来存储该div的宽度和高度值。 一旦您已经得到了初始的div宽度和高度值，您可以添加一个Vue指令 `v-bind:style`来动态地设置它的宽度和高度。 下面是一个完整的Vue组件示例代码，实现了可调整大小的div元素: ``` <template> <div class="resizeable" :style="{ width: `${width}px`, height: `${height}px` }" ref="resizableDiv" > <!-- 在此处放置您想要放置的内容 --> </div> </template> <script> export default { data() { return { width: null, height: null, }; }, mounted() { this.width = this.$refs.resizableDiv.offsetWidth; this.height = this.$refs.resizableDiv.offsetHeight; window.addEventListener("resize", this.handleResize); }, beforeDestroy() { window.removeEventListener("resize", this.handleResize); }, methods: { handleResize() { this.width = this.$refs.resizableDiv.offsetWidth; this.height = this.$refs.resizableDiv.offsetHeight; }, }, }; </script> <style> .resizeable { resize: both; overflow: auto; } </style> ``` 在这个示例中，我们使用了`mounted`生命周期钩子函数，使Vue在组件挂载后获取div的宽度和高度。我们还添加了一个`handleResize`方法，以便在窗口大小发生变化时更新div的宽度和高度值。最后，在CSS样式中，我们对div使用了 `resize`属性使其可以调整大小。 希望这个代码示例对您有所帮助！如果还有其他问题，请随时问我，我会尽我所能来协助您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值