javascript - CSS percentage of screen with position:absolute - Stack Overflow

admin管理员组

文章数量:1393034

I have a little "floating" menu type thing to the left of a profile displaying some info and it looks good, however i used a different pc before and it was overlapping the main page body (due to screen resolution).

So this is the original CSS(with CSS3 fancy stuff stripped out):

position: absolute;
border: 1px solid #73a7f0;
width: 200px;
left:10px;
top: 160px;
padding: 5px 14px;
border-radius: 4px;

and this is what i am trying to do, the line that has changed is:

width: 10%;

Any ideas how it can look the same depending on screens?

Thanks!

I have a little "floating" menu type thing to the left of a profile displaying some info and it looks good, however i used a different pc before and it was overlapping the main page body (due to screen resolution).

So this is the original CSS(with CSS3 fancy stuff stripped out):

position: absolute;
border: 1px solid #73a7f0;
width: 200px;
left:10px;
top: 160px;
padding: 5px 14px;
border-radius: 4px;

and this is what i am trying to do, the line that has changed is:

width: 10%;

Any ideas how it can look the same depending on screens?

Thanks!

• javascript
• html
• css

Share Improve this question Follow asked Mar 6, 2012 at 16:33 Ian TaylorIan Taylor 17911 gold badge55 silver badges1818 bronze badges 1

• What's wrong with width: 10%;? – Alexander Pavlov Commented Mar 6, 2012 at 16:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Diodeus' answer is true if the container has static positioning. If the container has a width set, even a percentage width, and the container has a position other than static (the default), the child will use that as the context for its percentage width.

Fiddle here: http://jsfiddle/USJnN/

Absolutely-positioned elements are no longer part of the layout. When a width is specified for a block element, the width is relative to its container. Without a fixed-sized container, a percentage doesn't really have a size context other than the browser window, which is variable.

Using a width in pixels is what you need in this situation.

本文标签： javascriptCSS percentage of screen with positionabsoluteStack Overflow