CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
user3128861
user3128861

Reputation: 121

Fit my tabs height in a container

Currently I have a few navigation <nav> tags. I have place the nav tag within a container with 100% width. But when I set the container height by a certain percentage the <ul> & <li> tag in the nav when click got cut off instead of scale down. How do I go about doing it?

here's my css code; 

#container
{
    position: absolute;
    top: 30px;
    left: 50px;
    width: 100%;
    height: 50%;
    background-color: #000000;
}

below is my source code.

http://jsfiddle.net/eMLTB/107/

Upvotes: 0

Views: 67

Answers (2)

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

Instead of 

height: 50%

can you just use 

min-height: 50%

as this implies that the min-height will be 50% but it will not restrict it in case container has huge content that will be more that 50% height of the container

DEMO http://jsfiddle.net/eMLTB/109/

Upvotes: 1

loxxy
loxxy

Reputation: 13151

Percentage is applied to whatever default height the browser sets for the page.

So If by 50% you mean the #container to be 50% of the page height then you must have this as well:

html, body {
    height:100%;
    min-height:100%;
}

Upvotes: 0

Related Questions