更改窗口宽度\高度时自动调整大小的div
更改窗口宽度\高度时自动调整大小的div
提问于 2013-09-07 04:29:19
我到处都找过了。仍然不能给出一个非常“基本”的想法的示例代码：
一个占据90%屏幕大小的div，当浏览器大小改变时，它会自动调整(占据相对屏幕的90% )
其中嵌套的div也应该调整自身的大小。
这有可能吗？
编辑
当我尝试垂直调整屏幕大小时，宽度90%不起作用。
回答 4
Stack Overflow用户
发布于 2015-04-25 01:29:51
使用vh属性。它表示视口高度，是百分比。所以高度: 90vh意味着视口高度的90%。这在大多数现代浏览器中都有效。
例如：
div {
height: 90vh;
}你可以放弃身体上剩下的那些愚蠢的100%的东西。
如果你有一个标题，你也可以做一些有趣的事情，比如通过使用CSS中的calc函数来考虑它。
例如：
div {
height: calc(100vh - 50px);
}这将为您提供100%的视口高度，减去50px的标题。
Stack Overflow用户
发布于 2013-09-07 04:37:05
在此场景中，外部<div>的宽度和高度为90%。内部div>的宽度是其父对象的100%。两者都会在调整窗口大小时进行缩放。
HTML
<div>
<div>Hello there</div>
</div>CSS
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 100%;
background: green;
}
body > div > div {
width: 100%;
background: red;
}演示
Stack Overflow用户
发布于 2018-11-30 01:18:09
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
resize: both;
overflow: auto;
}
img{
height: 100%;
width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this 1234567891011 div
element.
</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
<img src="images/scenery.jpg" alt="Italian ">
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18666106
复制相关文章
相似问题
腾讯云开发者
