0

I want to build a website with a div on top, that is always 100% in "height" (regardless of the users screen size or size of the browser window), so that every other content on the site, is "hidden" and the user needs to scroll down to watch it.

  1. Problem: Every time I use 100% in a div height, and float another div to be beneath the first one, the second div moves to the far bottom of the site. I don't find a way to use height:100% in a good way.

  2. Problem: I want to place content in the first div that is center center. Like in this example, and combine it with the above described example.

I hope my description is clear enough, any help is welcome.

regards.

Chalist
  • 3,160
  • 5
  • 39
  • 68
vincent trest
  • 85
  • 1
  • 8

4 Answers4

0

give z-index to div accordingly and apply margin-top property to the div you want to be scrolled

0

Use jquery for finding resolution and set in element's width and height:

html:

<div id='test'></div>

jquery script:

$(document).ready(function(){
    var w = $(window).width();
    var h = $(window).height();

    $('#test').css({width: w, height: h, background: '#bbb', position: 'absolute', top: "0", left: 0});
});

Look here

Community
  • 1
  • 1
Chalist
  • 3,160
  • 5
  • 39
  • 68
  • that looks interesting, I was thinking of that possibility. but is there a way to do it with css only? – vincent trest May 19 '13 at 12:53
  • CSS can not do this, I write a little script in jsfiddle: http://jsfiddle.net/chalist/CrUmb/ – Chalist May 19 '13 at 12:55
  • thanks a lot!! I'll try that one.. but it will take me some time. – vincent trest May 19 '13 at 13:02
  • it works so far!! even with the dead-center stuff in the upper div. next problem now is: how do i place a div beneath the top div? tried it with float, but it doesn't work. Any suggestions? – vincent trest May 19 '13 at 14:24
  • add $('#div2').css({background: '#000', position: 'absolute', top: h}); for a second div, that is always under the "scroll belt" – vincent trest May 20 '13 at 17:32
0
html,body{
 height:100%;
 overflow:scroll;
 }

in html:

 div{position:absolute; width:100%; bottom:-100px; }

P.S. not tested correct me if I wrong

el Dude
  • 5,003
  • 5
  • 28
  • 40
0

It works, thanks to chalist! I managed to place a div (div2) that has a top:{window.height} So regardless of screensize/windowssize: you always need to scroll to see div2 div1 is always 100% in height and width, so perfect place for some "background-position:cover;" magick. Great!

$(document).ready(function(){
var w = $(window).width();
var h = $(window).height();

$('#div1').css({width: "100%", height: h, background: '#000', position: 'absolute', top: "0", left: 0});
$('#div2').css({background: '#000', position: 'absolute', top: h});
        });
vincent trest
  • 85
  • 1
  • 8