在改变窗口宽度\高度时自动调整大小的div [英] A div with auto resize when changing window width\height

问题描述

我到处寻找。
，仍然不能提供一个非常基本的想法示例代码：

一个占据屏幕尺寸90％的div在浏览器大小发生变化时调整自己（占据相对屏幕的90％）。

嵌入的div里面也应该调整自己的大小。

它甚至有可能吗？

编辑： b
$ b

宽度90当我尝试垂直调整屏幕大小时，％不起作用。

解决方案

使用vh属性。这意味着视口高度，是一个百分比。所以高度：90vh意味着视口高度的90％。这适用于大多数现代浏览器。

例如。

  div {
 height：90vh; 
} 
  

您可以放弃身上其他愚蠢的100％东西。 / p>

如果您有头文件，您也可以做一些有趣的事情，例如使用CSS中的calc函数来考虑它。

例如。

  div {
 height：calc（100vh  -  50px）; 
} 
  

这将为您提供100％的视口高度，减去50px 。

I've looked everywhere . and still couldn't come up with sample code of a very "basic" idea:

A div that is taking 90% of the screen size and it is adjusting itself whenever the browser size changes (to take 90% of the relative screen)

The nested divs inside it should re size themselves as well..

is it even possible?

EDIT:

width 90% is not working when i try to re size the screen vertically.

解决方案

Use vh attributes. It means viewport height and is a percentage. So height: 90vh would mean 90% of the viewport height. This works in most modern browsers.

Eg.

div {
  height: 90vh;
}

You can forego the rest of your silly 100% stuff on the body.

If you have a header you can also do some fun things like take it into account by using the calc function in CSS.

Eg.

div {
  height: calc(100vh - 50px);
}

This will give you 100% of the viewport height, minus 50px for your header.

这篇关于在改变窗口宽度\高度时自动调整大小的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！