Div is not rendering according to screen size

Question

In my app, I want everything to render according to screen size.

But a div is not rendering ;

Here is code :

<div id="tools" class="open">
.....
</div>

css :

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 5%;
   overflow: hidden;
   background: #ffffff;
}

It doesn't render according to screen size. Please provide me some feasible solution for this

EDIT :

Some tools icon is used in above div. So whatever screen size is used, size of image icon remains same. it doesnt render according to screen size

Answer 1

If by "rendering" you understand that the div is not showing, that is because you need to specify its height . Furthermore, avoid using the ID for CSS identification. Use its class instead.

CSS:

.open {
    position:absolute; 
    top:0; 
    right:0;
    bottom:0;
    width:5%;
    height:10%;
    overflow:hidden;
    background:#999999;
}

Instead of the height:10% , specify whatever height fits your needs.

Working fiddle here

Answer 2

Try this:

#tools {
    position:absolute; 
    top:0; 
    right:0;
    width:5%;
    overflow:hidden; 
    background:red;
}

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

Fiddle

Answer 3

You have given "width:5%;". This might be a reason that your div is not showing a proper width according to the screen. Make it "width:100%".

Also, you have defined {position:absolute; top:0; right:0; bottom:0;}. If top is 0 then why have you given bottom as 0?? It is not required. You can remove it.

Answer 4

I think, the problem is not the size of the div you using. But the size of icon , which is not changing according to size of div. either you using very small image or given fix width to them. try this with images . amke them with good standard size according to your app. and write this.

.class{max-width:100%}

This with re-size them according to div size

Answer 5

The problem can't come from this div because no fixed dimensions are defined. So the problem comes from a parent div. You have to check if all its parent div don't have fixed values.

Answer 6

It works perfectly fine just need to add some color so you can see it

http://jsfiddle.net/A2JjN/2/

background:red;
font-size:50px;

For anyone who is confused about why one might use top:0; bottom:0; top:0; bottom:0; then read this post CSS 100% height with absolute positioning top 0 bottom 0

Answer 7

I got my solution. I just give width in pixels instead of % and it worked.

#tools{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50px;
   overflow: hidden;
   background: #ffffff;
}