Question

following problem.
I need a div layer over my webpage . This layer should start after 300px and end with the websites end.

<div style ="       background-color: #FCFCFC; 
                    display: block;
                    height: 100%;
                    min-height: 100%;
                    height:auto !important; 
                    overflow: hidden !important;
                    opacity: 0.8;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: 1100;
                    overflow: hidden !important; 
                    margin: auto;
                    min-height: 100%; 
                    height:auto !important; 
                    height:100%; 
                    ">

Now this works but: i have not my margin at the top.
If i insert margin-top:300px the website just grows bigger and bigger with the scrollbar.

Any ideas?
best regards

Answer 1

If I understood you correctly:

http://jsfiddle.net/lollero/BjbQc/

CSS:

body {
    position: relative;
}

div {
    background: red; 
    position: absolute;
    top: 300px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.5;
}​