We Keep Coding

Div occupying total space of the screen

Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2
No matter if you resize the screen, the main div will always occupy the total space seen by the User.
To test It I try this code below:
<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
This is my Section!
</div>
With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?

You can do it without javascript with only pure CSS.
With vh units, you can specify a margin-top on the next container like this :
#content { margin-top: 100vh;}
The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).
See it here

If you check your div more correctly, this code:
top: 0; bottom: 0; right: 0;
Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 0.

Disabling only scroll-bar feature

I want to disable scroll-bar functionality for chrome and don't want to hide the scroll-bar by giving overflow:hidden.
The scroll-bar should be visible
I want something like this: http://prntscr.com/ai5y9k
Any help would be great!!

use overflow: auto
that will display a scroll bar only when necessary (i.e. the content is higer than the window)

Closest you will get to, is to enforce the body to be no larger than the window then tell the scroll bar to always be present.
body {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
overflow:scroll;}

Scrolling ability in a fixed div

I have a div that slide from the left 100% once you press a button. In that div it will display my menu for the site. The issue I am having is when on a small browser size the content gets covered and you are unable to see the rest of the links.
My div #slidingMenu has a fixed positioning and I gave the div an overflow-y:scroll. Once I added that code I did have the ability to scroll. But the problem was #slidingMenu now slides out displaying a white bar (scrollbar). Is there a way to have the main scrollbar of the browser control my menu in #slidingMenu when I scroll?
Here is the css and the file http://jsfiddle.net/bC5zh/6/
#footer{
background-color:#999;
width:100%;
height:50px;
position:absolute;
top:100%;
margin-top:-50px;
line-height:50px;
}
#toggle{
color:#FFF;
margin-left:50px;
cursor:pointer;
}
#slidingMenu{
position:fixed;
background-color:#999;
width:100%;
height:100%;
top:0;
left:-100%;
overflow-y:scroll;
}

You would use
overflow-y:auto;
To remove the scrollbar but allow for scrolling when inner content is overflowing, updated fiddle
For a smoother scroll on WebKit mobile devices you can use
-webkit-overflow-scrolling: touch;
Which mimics default iOS scrolling reference

Try adding in your css
#slidingMenu::-webkit-scrollbar {
display: none;
}
this will hide the scrollbar giving you the ability to still scroll on the site.

Resizing browser causes divs to scroll

I am trying to make a parallax scrolling website and its template is as follows:
HTML
<div id="content">
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
</div>
CSS
#content {
height:auto
}
#container1, #container2, #container3 {
position:relative;
height:100%;
width:100%;
background-size:cover;
overflow:hidden;
}
#container1 {
background-color:#FF0000;
}
#container2 {
background-color:#000;
}
#container3 {
background-color:#363636;
}
Problem: If you scroll down to either #container2 or #container3 and resize the browser, the website appears to scroll.
I suspect that the height:100%; is causing issue. In particular, resizing causes all three containers to resize, creating a weird offset.
Things I have tried:
Binding the resize event and dynamically changing the height of the divs
Adding a min-height property so that the resize locks after resizing
Hiding the div that is no longer in the view
Is there any simple way of fixing this? The last attempt fixes it, but I feel like there should be a better way rather cluttering my JS file with several .hide() and .show() events.

Modal Div to fill entire window including below fold

I have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.

Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative

div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.

Put it in a table with 100% width and that's all