How may i set the height of div to fill the browser height?

Question

Please visit my website at http://amrapps.ir/personal/indexbug.html

to visually see my problem.

Let me explain my problem:

In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.

Then it is the red div which takes 75 % of browser width.

When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.

Then you can click on go to top on the fixed div above to get back to red div.

Navigations are working well but there's a problem.

When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?

thank you for your effort.

You can view page source to see the css. it is clearly written. — Amir Hashemieh, Jul 21 '14 at 10:10
Would you please explain me more? What is the problem with HTML layout? — Amir Hashemieh, Jul 21 '14 at 10:23

score 1 · Answer 1 · answered Jul 21 '14 at 10:51

1

Change your #aboutmore class to the below css:

#aboutmore {
    background-color: #FFCE85;
    margin-top: 5px;
    top: 25%;
    position: absolute;
    /* height: 74%; */
    width: 100%;
    min-width: 1130px;
    bottom: 0px;
    z-index: 3;
}

answered Jul 21 '14 at 10:51

Mr_Green

40,727
45
159
271

I added this code look at my website,The red div is not visible anymore!!! I just want the red div to be invisible when i'm at the yellow div(an the user changes browser height(resizes)) – Amir Hashemieh Jul 21 '14 at 11:16

score 1 · Answer 2 · edited May 23 '17 at 11:57

Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.

First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.

Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.

Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.

I'm going to add some code here to help with a fixed header:

div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}

about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}

Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?

How may i set the height of div to fill the browser height?

2 Answers2