A div with auto resize when changing window width\height

后端未结

关注

 4  1822

梦谈多话

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 its

相关标签:

4条回答

迷失自我

2020-12-13 15:07
Code Snippet:
```
div{height: calc(100vh - 10vmax)}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
無奈伤痛

2020-12-13 15:08
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
闹比i

2020-12-13 15:19
In this scenario, the outer <div> has a width and height of 90%. The inner div> has a width of 100% of its parent. Both scale when re-sizing the window.

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;
}
```
Demo

Try before buy
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧巷少年郎

2020-12-13 15:27

  <!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>

0 讨论(0)