Geek asks and answers

CSS height percentage does not scale

I am trying to create the top of a website to place a logo on the left and a navigation bar on the right. The image is large because I was told that it can be used on an HDTV and wants it to scale well. I thought that if I put the logo and the navigation bar in the same div, I could just apply the percentage to the height, so it will always be the top 10% of the screen, but it does not scale with my code, it just remains the same image size. Any help is appreciated.

<body>
<div id="container">
    <div id="top">
    <img src="images/logo.png" alt="logo">
    <ul>
    <li><a href="#" title="1">1</a></li>
    <li><a href="#" title="2">2</a></li>
    <li><a href="#" title="3">3</a></li>
    <li><a href="#" title="4">4</a></li>
    <li><a href="#" title="5">5</a></li>
    </ul>
    </div>
</div>

And this is CSS using

#top {
height: 10%;
width: 100%
}

I would really appreciate if anyone would help.

+5
source share
2 answers

If you are trying to scale the image, you need to target the image in CSS.

(, , ) . , .

html, body, #container {
    height: 100%;
    width: 100%;
}

#top {
    height: 10%;
    width: 100%;
    min-height: 23px;
}

#top img {
    height: 100%;
    width: auto;
    min-height: 23px;
    min-width: 136px;
}

jsfiddle

+3

10%, , div. , , .

#top img {
    height: 10%;
}

: jsFiddle

+1

More articles:


All Articles