当你想一个div的高随着屏幕的高度变化

最新推荐文章于 2023-10-20 08:48:32 发布
最新推荐文章于 2023-10-20 08:48:32 发布
阅读量2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/84304411
本文介绍了一种方法，使div元素的高度能够根据浏览器窗口大小动态调整，解决了在打开和关闭浏览器控制台后div高度固定不变的问题。通过使用CSS calc函数，设置div高度为相对于浏览器窗口高度的百分比减去固定像素值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有些时候我们的Dear总会有一些无理的要求,然后我们还不得不去解决,那么如何让一个div的高随着浏览器的大小来变化呢?尤其是打开浏览器再打开控制台,然后关闭之后,我们会发现,div的高不变化了,就是打开控制台时那么大.

那么下面的就是解决办法,具体如何使用自己研究吧!!!

 

height:calc(100% - 60px);

 

自适应（div自适应，和屏幕自适应高度）
qq_42384002的博客
03-05 5919
1. div自适应内容： 由于div里的内容常常会发生变化，总是修改高度很麻烦，如果是动态页面则更不可能每次都改高度，所以div必须要自适应内容高度。 技巧： div去掉height,增加padding-bottom即可。 2. 屏幕自适应高度：同div自适应高度一样，有时页面的内容或多或少，甚至没有，而页面存在底部footer,如果不自适应屏幕高度，内容过少，会导致footer跑到页面...
DIV的高度自适应及注意问题（详细解释）(转)
weixin_30556959的博客
04-24 1015
积累了一些经验，总结出一些关于div的高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。 转自:http://hi.baidu.com/atmo/blog/item/f0036edd6de364dc8d102985.html一、高度的自适应（父div高度随子div的高度改变而改变） 1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,...
根据浏览器屏幕大小高度自适应
12-10
根据浏览器屏幕大小高度自适应
div 高度随窗口动态变化
u013362969的博客
08-01 746
var resizeDiv = function(){ heightWin = $(window).height(); heightWin2 = document.body.clientHeight; console.log("h1----"+heightWin+'h2---'+ heightWin2); document.getEl
html随窗口大小变化的,css怎么设置div随着窗口大小变换？
weixin_42447265的博客
06-07 5957
设置div随窗口大小改变而发生样式变换，可以使用css3的媒体查询来实现！下面我们一起来看下实现的方法吧。css怎么设置div随着窗口大小变换？1、新建一个div，设置初始化样式给div添加transition，在样式改变时，会具有动画效果。.app{width: 40px;height: 40px;border: 1px solid #000;transition: all .5s;}app2、...
如何自动在html页面加载时动态改变div等元素的高度和宽度
weixin_30389003的博客
10-19 593
这里需要用到jquery ＋ css。原理是在页面加载时用javascript去动态改变一个class的高度和宽度。这样结合javascript能动态获取浏览器／页面的高度和宽度，从而使得div能动态的跟随浏览页面的大小变化而变化并且不影响高宽比。下面的代码创建一个手机页面，每一行三个图片分占33%，每个图片div的高和宽会随着浏览器的大小变化而自适应。 <!DOCTYPE html&...
设置DIV最小高度以及高度自适应随着内容的变化而变化
09-25
结合上述属性，我们可以创建一个既能保持最小高度又能自适应内容高度的`<div>`。在提供的代码示例中，`.divHeight`类应用了以下样式： ```css .divHeight { height: 400px; /* 初始化高度 */ height: auto; /* 这...
div不能自适应高度不能随图片的高度变化
09-25
当我们在一个<div>容器中放置图片时，常常会遇到一个问题：如果<div>的高度设置为固定值，那么当图片大小改变时，<div>并不会相应地调整自己的高度以适应图片的高度变化。这就导致了<div>的高度显示为0，不能自适应...
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
10-23
在本文中，我们将会深入探讨如何利用JavaScript来控制页面元素的显示位置，使其固定在屏幕的某个特定位置，并且能够监听屏幕高度的变化，根据变化情况动态地调整元素的位置或样式属性。这一过程涉及到网页设计与前端...
相邻div实现一个跟着另一个自适应高度示例代码
09-25
在网页布局设计中，相邻`div`...总之，相邻`div`实现一个跟着另一个自适应高度的代码示例展示了传统CSS布局的一种解决方案。虽然现在有更先进的布局技术，但了解和理解这种经典方法对于深入掌握CSS布局仍然是有益的。
关于div自适应高度/左右高度自适应一致的js代码
10-27
函数内部首先获取浏览器窗口的视口高度clientHeight，并减去一个固定的值（例如200像素）以考虑页面布局上的需要，然后将结果设置为DIV元素（box）的高度。通过将auto_height()函数赋给onresize事件，即可确保每当...
html+css布局,DIV区域的宽度和高度随页面宽度变化时等比变化
10-20 1303
DIV区域的宽度和高度随页面宽度变化时等比变化(即:DIV保持纵横比随页面宽度变化),利用img图片标签能撑起高度的特点实现。
CSS 实现高度自适应铺满整屏的实现
weixin_43620243的博客
06-13 1391
<style> #login{ width:100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; } </style> 此时#login的高度自适应整个屏的高度 视口单位(Viewport units) 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视
html在div大小变化而变化,CSS网页布局实例：div高度随窗口变化而变化
weixin_33384949的博客
06-07 512
Example Source Code [www.52css.com]htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">CSS网页布局实例：div高度随窗口变化而变化*{margin:0px;}html{height...
原生静态布局下，用div+css实现界面随着不同的屏幕变换自动调整大小
yuange
04-06 5969
1 首先用css元素让body和html元素的的height和width设置成100%。   因为当我们设置100%的时候有一个对照的父元素，也就是说参照谁来设置自己高和宽的百分比。   对于有些浏览器来说，把屏幕的高和宽作为body元素的参照父元素，对于有些浏览器来说把屏幕的高和宽作为htm   的参照父元素，所以第一步同时把这两个元素作为参照父元素。2 定义一个盒子div ，设置div的wid...
设置DIV根据内容自动调整高度的三个方法
M_emery_的专栏
03-05 3504
Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度，我们看下面的HTML代码： divid="main">divid="content">div>div> 当Content内容很多时，即使main设置了高度100%或auto。在除IE外的其他浏览器中还是不能完好的自动伸展。也就是说，内容的高度容器main的高度还是没有自动撑开。 我们有三种方法可以
div根据屏幕缩放进行比例缩放
偷得浮生半日闲
08-13 4017
在一些视频类网站，视频的 div 宽度会跟随浏览器的大小进行比例缩放，一般来说，我们 div 设置宽度 100% ， 高度写死，宽度可以根据屏幕缩小而改变 div 的宽度，但是高度不会变化，如果想要 div 的高度也随着宽度的变化而变化呢？......
解决css中div随窗口大小变化而变化
热门推荐
烟溪彭于晏的博客
07-12 1万+
本来还很好看一旦缩放窗口，就成了这样 恶心吐了要。经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。这样子就顺眼多了 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。我们又只能通过强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。但是缺点也显而易见的，字体已经越界了。......
css怎么让网页随浏览器大小自动变化_IT兄弟连 HTML5教程 CSS3揭秘 CSS简介
weixin_35299004的博客
12-27 697
HTML使用标签将内容放到网页上，也可使用元素和属性来控制简单的文档外观。如果希望更全面地控制Web页面的外观和布局，则需要使用层叠样式表(简写为CSS)。CSS规范的工作原理在于允许用户制定一些规则，描述文档中元素内容的表现形式，通过设置不同的规则控制页面中每一个元素的外观，包括字体的颜色和大小、线的宽度和颜色、页面中各项之间的空白量，以便使页面看上去更令人感兴趣。CSS和HTML一样是所有...
vue 使得div块高度等于屏幕高度
最新发布
01-01
以下是一个简单的示例，假设你想要在一个名为`appDiv`的Vue组件里动态调整其高度： ```html <div id="appDiv" ref="appRef">内容区域</div> export default { data() { return {}; }, mounted() { this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值