A div with auto resize when changing window width\height

Question

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 resize themselves as well.

Is it even possible?

EDIT:

Width 90% is not working when I try to re size the screen vertically.

You mean using css and setting the width property to 90%?? http://www.w3schools.com/cssref/pr_dim_width.asp under property value. — Huangism, Sep 06 '13 at 20:30
@tomaroo: That won't work unless you also stick `position: relative` on the outer div. — user1618143, Sep 06 '13 at 20:32
Okay, you edited your question... is `width: 90%; height:90%` what you're looking for? — user1618143, Sep 06 '13 at 20:33
@user1618143 Sure it will work. What does `position: relative` have to do with this? We're not using absolute or fixed positioning, or top/left/bottom/right. Position relative won't change anything. — tomaroo, Sep 07 '13 at 16:58
@tomaroo: Don't you need `position: relative` on the outer element so that the `width: 60%` of the inner div comes to 60% of the outer div and not 60% of the whole page? — user1618143, Sep 09 '13 at 13:45
@user1618143 No you do not. A percentage value for a property is relative to the parent container, not the window. This is standard behavior for all elements — tomaroo, Sep 09 '13 at 13:53

Eric Warnke · Answer 1 · 2017-06-06T19:12:22.700

57

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.

edited Jun 06 '17 at 19:12

answered Apr 24 '15 at 17:29

Eric Warnke

1,325
12
18

1

This totally worked for me, thank you! Do you know if this method runs into older browser compatibility issues? Specifically IE? – straubcreative Apr 04 '16 at 23:17
1

what if I want to resize width dynamically? – Ramesh Pareek Jun 04 '17 at 13:45
6

You can use vw (viewport width). – Eric Warnke Jun 06 '17 at 19:10
Thank you. I really struggled until I found your post. For an SPA as PWA replacement for desktop app this is exactly what I needed. – Adam Davidson Apr 25 '20 at 08:42

score 9 · Answer 2 · answered Sep 06 '13 at 20:37

9

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

answered Sep 06 '13 at 20:37

insertusernamehere

23,204
9
87
126

2

@spencerthayer What do you mean, it doesn't work? The browser scales the container to fill 90% width and height when resizing the window vertically or horizontally. The container on the inside takes up as much space as possible, given by its parent. – insertusernamehere May 02 '14 at 09:33

score 0 · Answer 3 · answered Feb 08 '23 at 01:17

I was searching for similar solution, I think here it is better to fiddle with Javascript since we are dealing with dynamic changes.

I rendered two divs, one outside the other, set Height/Width of outer div based on screen width (based on 1500px width 100px outer div. For the inner div I calculated based on percentage of the outer div.

HTML

<div class="wrapper">
        <div class="box outer">
            <div class="box inner"></div>
        </div>
</div>

CSS

.wrapper{
/* not important just to make the box appear in center for visibility*/
    display: block;
    margin: 200px auto;
    width: fit-content;
}
/*Only selecting background colors and making inner box adjust in the center of outer box*/
.box.outer {
    background: rgb(204, 75, 25);
    position: relative;
}

.box.inner {
    background: green;
    position: absolute;
    top:50%; left:50%; transform: translate(-50%, -50%);
}

Javascript

document.addEventListener("DOMContentLoaded", function (event) {
    let outerBox = document.querySelector('.box.outer');
    let innerBox = document.querySelector('.box.inner');
    // multiplier is used to calculate width of inner div based on outer div, so they always look the same shape
    let multiplier = 0.8;
    function renderBox() {
    //let outerbox Dimension based on window width assuming 1500px width as base
        outerBox.style.height = window.innerWidth / 15 + 'px';
        outerBox.style.width = outerBox.style.height;
        innerBox.style.height = outerBox.offsetHeight * multiplier + 'px';
        innerBox.style.width = outerBox.offsetHeight * multiplier + 'px';
    }
    window.addEventListener("load", function (e) {
        renderBox();

    })
    window.addEventListener('resize', function (e) {
        renderBox();
    })
})

score -1 · Answer 4 · answered Nov 29 '18 at 17:18

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

score -2 · Answer 5 · edited Dec 21 '19 at 23:08

-2

Code Snippet:

div{height: calc(100vh - 10vmax)}

edited Dec 21 '19 at 23:08

RBT

24,161
21
159
240

answered Dec 21 '19 at 19:30

muskan

1

5

Short, code-only answers are often frowned upon on Stack Overflow. In order to avoid being flagged as 'low quality', consider adding some explanatory text, and how your answer offers something new that the others don't. – Adrian Mole Dec 21 '19 at 19:58
I've *not* down-voted you. You can try improving your answer as per the feedback suggested by Adrian. – RBT Dec 21 '19 at 23:12

A div with auto resize when changing window width\height

5 Answers5

Linked