We Keep Coding

HTML : page development like g mail with out browser vertical scroll bar

I am developing CRM project using HTML and CSS. I need to fit my project for all screens without vertical scroll bar same like g mail. If we observe g mail we have scroll bar only for mail section not for browser. I need too implement same like that. Can anyone please help me how to implement. the page should be fit for all screens means if it is in small screen or big screen or medium screen. Is there any tutorials or any script for calculating height for main content based on browser height.
I attached image. In that header and main content section is there. So I need to set body height based on browser height and as well as I need to calculate each section height each time based on browser as well as inside divisions.
we should not give any fixed height , why because we need to fit the screen for all resolutions like 1366*768 and 1400*968 and 1680*1050 and 1920*1080. So when we are increasing the browser height the DOM height also should be increase as well as decrease.
Please help me to find this type of development with HTML, CSS , JavaScript and Jquery.

First you check how the default height of your element is. With JQuery this can be done like this: var height = $('.classOfYourElement').height(); var currentBrowserHeight = $(window).height(); Then you need to attach a listener to resize Event $(window).resize(function() { // Inside here you are now calculating the difference of the height of the window to the default height of window which you set earlier. this difference you should then apply to the div height :) hope that helps. }); –

You need to have a wrapper around the 5th section and give it a fixed height.
Then you have to specify the overflow-y value to scroll i guess.

Allow height% with jQuery scrollbar

I am using the Malihu custom content scroller with automatic scrolling. So far, I basically am experimenting with it. I noticed when I take the height of the scrolling div and use a percentage instead of a fixed amount in px, it expands the div the entire height of the scroll area (off the screen).
I'm literally just taking the code from this GitHub location then opening the file "auto_scrolling_example.html".
Then in the <style> section of the header, I'm simply changing .content: height:500px to .content: height:50%.
Does anyone know why this doesn't work and/or have a good workaround for it?

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent.
If the parent doesn't have any height or width inner children will not work in percentage.

How is win-listview height set? - WinJS

this is driving me up the wall. I cannot figure out how to make the listview's height automatic.
i.e. have the listview's height extend in order to occupy all the space it needs and have the outer container offer a overflow-y scroll feature.
I cannot seem to find any documentation on this unforuntately.
Help would be great. Thanks!

ListView controls are 400px tall by default. That's on line 1421 of the ui-light.css file. You can override it by adding a rule on your page like:
.win-listview {
height: 100%; /* (or you can specify absolutely with something like '600px') */
}
On this page in the dev center it says...
Setting the ListView control's height
The ListView does not dynamically adjust its height to fit your content. For a ListView to render, you must specify an absolute value for its height. The Windows Library for JavaScript style sheets set the ListView control's height to 400 pixels.
From a design standpoint, you probably shouldn't be doing vertical scrolling on a ListView. They're designed to be laid out horizontally (as are apps in general). Combining horizontal and vertical scrolling can make for an awkward user experience. I wrote some articles about this.

How to bind the page's scroll bar to div?

How can I bind the page's scroll bar to a particular div instead of the entire page. See Google Plus for an example of this functionality.!
http://i.stack.imgur.com/Ab82L.png

You can use position fixed panels down the left and across the top. The body will still scroll as normal, but the panels on the sides will make it look like only part of the page is scrolling.

If you don't want to mess with the browser's native scrollbar, you could always
Create a container
Set the height and width of the container to 100%
Set overflow to scroll (or auto)
That way you created your own viewport and have more control.

Adjust an iframes height so its the size of the viewport

my page has a div on the top of 100px height and an iframe beneath it. I want the iframe to fill teh rest of the page viewport i.e that the iframe's height should adjust as the browser window adjusts so we don't see two scroll bars - I just want that the scrollbar should be visible in the iframe and not in the browsers own viewport.

If I understand you correctly, you should wrap the iframe in a div for which you make a class in CSS that has overflow:scroll;, height:100%; and margin-top:100px;
The height makes you fill the whole page, the margin-top clears room for your top div and the overflow ensures you get scrollbars around your iframe. You might need to play a little with the height.
As far as I know it is not possible to actually change the iframe's height, since you import it from another page.
Hope I could help a bit.