我到处都找过了。仍然不能给出一个非常“基本”的想法的示例代码:
一个占据90%屏幕大小的div,当浏览器大小改变时,它会自动调整(占据相对屏幕的90% )
其中嵌套的div也应该调整自身的大小。
这有可能吗?
编辑
当我尝试垂直调整屏幕大小时,宽度90%不起作用。
发布于 2015-04-25 01:29:51
使用vh属性。它表示视口高度,是百分比。所以高度: 90vh意味着视口高度的90%。这在大多数现代浏览器中都有效。
例如:
div {
height: 90vh;
}
你可以放弃身体上剩下的那些愚蠢的100%的东西。
如果你有一个标题,你也可以做一些有趣的事情,比如通过使用CSS中的calc函数来考虑它。
例如:
div {
height: calc(100vh - 50px);
}
这将为您提供100%的视口高度,减去50px的标题。
发布于 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;
}
演示
发布于 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>
https://stackoverflow.com/questions/18666106
复制相似问题