Dynamically embed a web page vertically in the browser
I am relatively new to this and have been working on the page last week. I've found this site very helpful so far, but I can't get my page to dynamically fully fit into the browser window vertically. I want it to shrink the elements so that the whole thing goes into the browser without a vertical scrollbar. The reason for this is simple, it will be a landing page that is inspired by a mobile app, click a button and it will take you where you need to go. However, users will have different screen sizes / resolutions, so the page needs to be fluid.
I was able to fold the page to fit the browser width as shown here ( jsFiddle Demo ).
container {
padding: 1% 1%;
width: 80%;
height: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
/*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container width to 100%. */
}
As you can see, all the elements expand dynamically based on the width of the browser. However, when viewed on a 1024x768 screen, the bottom row of "buttons" is partially disabled by the browser, and the user has to scroll to see the rest.
I have tried several solutions on this site but cannot get it to work. Can anyone here help me to get it to dynamically adjust to the browser width and height?
To better illustrate what I would like, this is the effect that I would like to see an example of dynamic resizing
Here is an image that shows exactly what my problem is Resolution difference http://img404.imageshack.us/img404/5840/resolutionissue.jpg
Note that the spacing between the buttons decreases due to the percentage spacing, but the images will decrease until the window is adjusted horizontally only. I need this to squeeze it all into the browser window.
source to share
To ensure that your container and children (if necessary) fill the screen vertically, you need to make sure that you also apply 100% height to the common parents of those elements. In your case, I would apply the following rule to your css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
This will cause your container to adapt to 100% of the height of the browser window (since container is a child of your overall body, which is a child of the html tag). However, since you have padded in, you will still see a vertical scroll bar. Therefore, you need to make sure that you decrease the height% of your container element depending on the padding / margins applied. In your case, as Kai Qing suggests, you should change the height of the container to 98%.
source to share