CSS - Scaling positioned elements rel. to browser window size

Question

Is there a way to make position 'ed elements scale correctly relative to the window size using only CSS or I got to step it up to javascript/jQ? I tried adding a container with 100% width and height and then scale accordingly.

.container{
    position: relative;
    width: 100%;
    height: 100%;}

.transblock{
    position:absolute; 
    width:44%; 
    height:5%; 
    top:90%; 
    left:0%; 
    background:green;
    opacity: 0.6;
    z-index:5; }

.h1text{
    position:absolute; 
    width:30%; 
    height:5%;
    top:90.75%; 
    left:13.5%; 
    z-index:10;
    color:white;}

http://jsfiddle.net/cyaXL/

The gap between the paragraph and the menu is the issue. It's too small on 1280p screen and too large on 1920p. Is there any way to make it adjust better?

Answer 1

You can as well us 'viewport' units like this:

div {
 width: 50vw; //means it should take 50% of the window size
}

Answer 2

I think the fact that you have the .menu4 with a left of 25% is the problem here:

.menu4 {
  left: 25%;
}

better:

.menu4 {
  left: 0%;
  width:auto;
  margin-right:1%;
}

.menu4 ul {
  float:right;
  clear:both;
}

Answer 3

这必须通过CSS而不是使用任何脚本来完成，是的，您做得对，使容器达到Windows大小的100％，然后将项目放入该容器中。

Answer 4

You are using font size in pixel. Please try with "em". while doing the layout with %, we need to used "em" instead of "px". please refer the conversion table and try.