How to make DIV take the full height of Browser

Question

I want to make a DIV with height 100% to take the full height of the Browser Window not just the Viewport height.

The outer DIV has Display property Flex.

The target DIV has class called full-height-div

That is HTML code

<div class="main-container">
    <div class="full-height-div">
        
    </div>
    <div class="main-content">
        
    </div>
</div>

and that is CSS code

body, html {
    margin: 0;
    height: 100%;
}

.main-container {
    display: flex;
    height: 100%;
}

.full-height-div {
    height: 100%;
}

what do you think the *full height of the Browser Window* is? the "window" is potentially infinite in height, is it not? the more you add, the higher it gets - unless "browser window" means something different to what I'm guessing — Bravo, Aug 28 '21 at 02:32
The problem is that when the DIV which has class 'main-content' has height greater than viewport, the height of the target DIV is still in view port height — MrMustafa, Aug 28 '21 at 02:41
Ok then can you review this [https://stackoverflow.com/questions/8794338/get-the-height-and-width-of-the-browser-viewport-without-scrollbars-using-jquery](https://stackoverflow.com/questions/8794338/get-the-height-and-width-of-the-browser-viewport-without-scrollbars-using-jquery) — Murat Kezli, Aug 30 '21 at 22:18

Murat Kezli · Answer 1 · 2021-08-28T02:45:15.167

1

body, html {
    margin: 0;
    height: 100%;
}

.full-height-div {
    height: 100vh;
    background-color:blue;
}

.main-container {
    display: flex;
    background-color:red;
}

<div class="main-container">
    <div class="full-height-div">
        full
    </div>
    <div class="main-content">
        main
    </div>
</div>

.full-height-div {
    height: 100vh;
}

edited Aug 28 '21 at 02:45

answered Aug 28 '21 at 02:39

Murat Kezli

187
2
5

Not work, I want DIV to be full height of Browser not Viewport – MrMustafa Aug 28 '21 at 02:50
If main-content DIV has height greater than Viewport then it not work – MrMustafa Aug 28 '21 at 02:51

score 0 · Accepted Answer · answered Aug 28 '21 at 03:06

It sounds like you want <div class="full-height-div"> to be the height of its parent.

.main-container needs flex-direction: row, not height: 100%.

In this example, <div class="full-height-div"> (outlined in red) takes on the height of its parent div.main-container (outlined in green).

body, html {
    margin: 0;
    height: 100%;
}

.main-container {
    display: flex;
    flex-direction: row;    
    border: 5px solid green;
    width: 100%;
}

.full-height-div {
    height: 2000px; /* just to force it to be taller than the viewport in this example */
    border: 1px solid red;
    width: 100%;
}

<div class="main-container">
    <div class="full-height-div">
    </div>
    <div class="main-content">
    </div>
</div>

This was answered here: How can I make Flexbox children 100% height of their parent?

How to make DIV take the full height of Browser

2 Answers2