CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3769402
user3769402

Reputation: 211

Div set to 100% height won't grow when scrolling

I have a side div menu that is set to height: 100%. It works fine until the page expands and i need to scroll and then the div stays at the original height. I tried: 

$(window).resize(function(){
    $menu.css({'bottom':'0px'});
});

As well as:

$menu.css({'height':'100px'});

Neither had any affect. The css for the div is 

.menu_click{
top: 0px;
right: 0px;
display: none;
position: absolute;
font-size: 16px;
width: 200px;
height: 100%;
text-align: center;
z-index: 2;

}

In short I want the div to grow as needed, even if the page scrolls. The page starts with no scroll and certain elements grow, so it causes there to be a scroll.

Upvotes: 0

Views: 1175

Answers (3)

user3769402
user3769402

Reputation: 211

So position fixed was the solution. This stops the div from moving when I scroll.

Upvotes: 0

pizzarob
pizzarob

Reputation: 12029

have you tried setting the height of the div to 100vh in your css? This will set the div to 100% of the viewport height and will respond appropriately to the changing size of the window.

Upvotes: 1

Ted Noelker
Ted Noelker

Reputation: 171

height: 100% can be temperamental because 100% of the height of the document can be less than the height of the window depending on the content/CSS structure (unlike width, where 100% will translate to both).

The simplest way to handle this would probably be to just copy the window height:

$(window).resize(function(){
    $menu.css( 'height', $(window).height() );
});

Upvotes: 1

Related Questions