如何将div缩放到另一个元素内的100%高度和宽度
要将div缩放到另一个元素内的100%高度和宽度，您可以使用CSS的width和height属性，并将它们设置为100%。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head><style>
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: lightblue;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<p>这个div将填充父div的宽度和高度。</p>
</div>
</div>
</body>
</html>在这个示例中，.parent类表示父元素，.child类表示子元素（即要缩放的div）。通过将子元素的position属性设置为absolute，并将top、left、width和height属性设置为100%，可以使子元素填充父元素的整个空间。
相关·内容
1回答
如何在背景上选择图像尺寸:封面div？
css、web、slider
我在我的页面上有一个滑块与属性的背景覆盖应用，所以它适合整个事情。滑块也有一个50vh的固定高度。
背景总是从图像中剪切出我不想要的东西。我应该如何选择正确的宽度x高度，知道网站将在非常不同的设备上看到？
浏览 3提问于2017-08-18得票数 0
3回答
如何在伸展100%的父级中对齐n个固定宽度元素(Div)
html、css
这个问题一定是以各种各样的形式问过的，但是我已经找了很久，没有找到答案，所以我问了。我需要这些div在父元素中居中，彼此相邻。我可以使用te
浏览 0提问于2013-01-29得票数 0
回答已采纳
1回答
高分辨率帆布页面缩放到窗口高度
html、css、canvas、html5-canvas
我试图创建2层高分辨率(2480x3508)画布元素，缩放到100%的窗口高度和50%的窗口宽度。<div style="position: relative; width: 1235px; height: 100%;">
<canvas id="
浏览 0提问于2019-03-26得票数 0
回答已采纳
1回答
如何设置输入[type=“text”]的宽度和高度，使其与块元素的标准宽度和高度相对应？
html、css、input、size
出于某种原因，如果我将width和height设置为text input元素，它会从所有具有相同宽度和高度的其他块元素中获得较大的大小 输入元素的宽度和高度值的公式是什么，以便它具有与width =x和height = y的div完全相同的大小？: center;
b
浏览 32提问于2021-06-19得票数 0
回答已采纳
1回答
边距在移除边框时崩溃
css
场景
当我从DIV (CSS -第118行)中移除边框时，(1)的边距会以(2)和(3)的边距塌缩(或者看起来是这样的)。
浏览 1提问于2017-04-09得票数 1
回答已采纳
1回答
内联SVG不缩放到高度
html、css、svg
我将SVG嵌入到下面的代码中： document.addEventListener"此图像只缩放到浏览器窗口的宽度，而不是其高度。这幅画大概是正方形的</e
浏览 5提问于2015-08-13得票数 0
回答已采纳
5回答
如何使我的应用程序总是占据100%的屏幕？
html、css
嗨,html{height:100%;body{height:100%;但是，这只会使身体100%..。我从哪里开始？有人有教程什么的吗？
浏览 6提问于2017-06-30得票数 2
回答已采纳
2回答
将div纵横比保持在另一个div内。
javascript、jquery、html、css
我有一个div (#外层)，放置在浏览器(Chromium)的左上角部分。它的宽度会随着窗口大小的变化而改变。外部div内部有另一个div，我想用固定的高宽比(16:9)调整大小，同时始终保持在外部div的范围内。
例如，如果外部div大小大小为高和薄，内部div应适合外部div的全部
浏览 6提问于2015-07-06得票数 3
回答已采纳
1回答
在单击scrollTo函数之前，如何获得一个div来占据整个屏幕？
javascript、jquery、html、css
例如，在这个家伙的网站()中，不管你放大多少窗口，包含他的名字和背景的div占据了整个屏幕，直到你向下滚动或者点击'read‘链接，它有一个scrollTo功能。有人能给我解释一下吗？
浏览 3提问于2017-08-29得票数 0
回答已采纳
1回答
调整DIV的大小(具有固定的宽度和高度)及其内容，同时保持其纵横比
css、viewport、aspect-ratio
我的页面上有一个DIV，它的宽度和高度是固定的(600x400)。然而，当视口变得小于DIV的宽度或DIV的高度时，我希望DIV调整大小以保持完全可见，同时保持其纵横比不变。此外，我希望DIV中的所有元素都以相同的方式调整大小(同时保持高宽比)。
在搜索纯CSS解决方案时，我
浏览 3提问于2015-08-03得票数 1
6回答
从具有绝对位置的父本继承div高度
javascript、css、html
我想用纯CSS实现这种布局：背景中的梯度是浏览器窗口宽度的100%。内部文本位于一个1000 inside内，以浏览器窗口为中心。现在我想要文本定义梯度的高度。问题是:梯度是绝对的(left: 0px; width: 100%)，但是文本在另一个div中。我在display:table;和display:table-cell;中尝试过一些东西，但是一旦我将梯度d
浏览 4提问于2012-09-20得票数 1
回答已采纳
3回答
适合父母并保持高宽比的Div
html、css、css-position、aspect-ratio
我有一个保持高宽比的div元素:它根据它的宽度(使用填充技巧)计算它的高度。我想要做的是把这个div放到另一个，通过拟合最大的可用空间，垂直和水平，没有裁剪。我认为最接近我想要的是object-fit: contain --它仅限于img。
我想要的div覆盖最大的高度<em
浏览 1提问于2018-05-10得票数 17
回答已采纳
2回答
带有viewBox和width的SVG在IE中不能正确缩放高度
javascript、html、css、svg
我正在尝试构造具有viewBox属性的内联SVG，但没有显式的宽度或高度属性。我使用CSS将SVG的宽度设置为100%。这应该让SVG缩放到它的包装容器，保持由viewBox设置的纵横比。在Chrome和Firefox中，这是完美的！</div>div {}
width: <em
浏览 9提问于2014-10-09得票数 26
1回答
CSS布局:移动，垂直布局，页眉(固定高度)，页脚(固定高度)。如何在高度和宽度约束下用img填充剩余空间
html、css、image、layout、flexbox
布局:移动，垂直布局，页眉(固定高度)，页脚(固定高度)。如何在高度和宽度约束下用img填充剩余空间使用具有挠性方向的列设置页眉和页脚的高度(或者可以用挠曲基础完成)的挠性收缩:0对于页眉和页脚，这样它们就不会收缩挠缩:1在图像容器上，因此，如果
浏览 1提问于2021-07-01得票数 0
回答已采纳
1回答
为什么当另一个DIV有100%的宽度时，DIV不占据移动Chrome屏幕的全部宽度？
html、css、google-chrome、mobile
}
background: orange;}
padding: 0 2em; background: lightblue;}</head><
浏览 1提问于2018-03-02得票数 1
回答已采纳
1回答
*前后的伪元素表现出混乱的行为
html、css、pseudo-element
我在容器div上实现一个：：后伪元素。伪元素设置背景颜色，顶部0，左0,100%宽度和高度.在div内，高度设置为200 to。这种HTML/CSS组合的结果是背景颜色覆盖了整个嵌套的div，这是封闭的，并指定了增加的高度和宽度。
但是，如果我删除：：后，背景颜色被
浏览 0提问于2018-02-17得票数 3
回答已采纳
1回答
我有一个基于引导的网站，其中包含几张高度相同的图片，其中一些图片漂浮在左边，一些图片在右边： <div class="pull-left">"></div>
当容器太窄，无法将所有图像放进一行时，它们就会被垂直堆叠，就像预期的那样。现在，我正在寻找一种
浏览 4提问于2015-02-26得票数 1
回答已采纳
6回答
图像溢出css中的其他div元素
html、css
我正在学习CSS的基础知识，并不明白这一点。为什么image比他所在的div类大。Div类指定了宽度和高度，但无论如何图像要大得多。html代码如下所示徽标的CSS
浏览 2提问于2013-07-02得票数 1
回答已采纳
2回答
<div>相对定位
html、css
.rent-roll-container { height: 100%;.rent-roll-month-nav { display: inline-block;} background: red; height: 100%;如您所见，有一个表，其中两个div&#
浏览 2提问于2013-09-20得票数 0
回答已采纳
2回答
是否可以仅使用CSS将子项的宽度和高度相等，而不超过它的父项？
javascript、html、css
我的想法是使子对象(@example ".moon")具有相等的高度和宽度值，并且不超过父对象的宽度或高度(@example为".sun")。因此，当父对象的宽度大于其高度时，子对象的宽度和高度的值是较小的值，即父对象的高度</
浏览 34提问于2020-08-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
