Dynamically resize html elements based on window size

Question

So I just started out learning some web development with HTML and CSS and recently i found out that if i decide to create a full size web content on my laptop which has a 16 inch window, i wouldn't get the same view as in my 24 inch desktop monitor.

Here's an example. In the first screenshot below, i have a div which contains the dropdown elements such as name and telephone number to occupy the page height on my laptop.

Here, you can see that i made the height of the div to occupy roughly the full page of the web page. However, i noticed that if i were to open this html document with my 24 inch monitor, i get the following:

Hence i just noticed that although i made the div of full height based on my laptop's window, it doesn't apply to when i view it with my larger 24 inch monitor. Could anyone help me out as i would like the height to be standardized as to how I would initially want it to be even when viewing on a larger window?

My HTML code is as below:

* {
    margin: 0;
    padding: 0;
}

.outer_frame {
    position: relative;
    border: 1px solid black;
}

.inner_frame {
    border: 1px solid black;
    height: 745px;
    width: 700px;
}

<!DOCTYPE html>

<div class = "outer_frame">
    <div class = "inner_frame">
        <label id = "name">Name</label>
        <input type = "text" id = "name_in" disabled class = "field">
        <label id = "tel">Telephone Number</label>
        <input type = "text" id = "tel_in" disabled class = "field">
    </div>
</div>

Does this answer your question? [DIV height set as percentage of screen?](https://stackoverflow.com/questions/15843391/div-height-set-as-percentage-of-screen) — SeeoX, Oct 05 '20 at 12:26

score 1 · Answer 1 · answered Oct 05 '20 at 12:18

Try to add calculated height without using fixed height. Use viewport height, so that it will take the auto height of your device. Just add height: calc(100vh - 10px); to your inner_frame

* {
    margin: 0;
    padding: 0;
}

.outer_frame {
    position: relative;
    border: 1px solid black;
}

.inner_frame {
    border: 1px solid black;
    height: calc(100vh - 10px);
    width: 700px;
}

<!DOCTYPE html>

<div class = "outer_frame">
    <div class = "inner_frame">
        <label id = "name">Name</label>
        <input type = "text" id = "name_in" disabled class = "field">
        <label id = "tel">Telephone Number</label>
        <input type = "text" id = "tel_in" disabled class = "field">
    </div>
</div>

score 1 · Answer 2 · answered Oct 05 '20 at 12:20

1

You can use the '%', 'vh' or 'em' for measurements instead of 'px'. But you should use media queries for different screen sizes.

e.g.

height: 90%;
width: 100em;

answered Oct 05 '20 at 12:20

Talha Maqsood

195
1
13

Dynamically resize html elements based on window size

2 Answers2