Jump to content

How Do You Use Css To Make A Page Fit Any Any Screen Resolution?


Recommended Posts

HiI am putting together a web application using ASP.NET which needs to work in any screen resolution using CSS. My application uses a Master Page for common feel with Content Pages for all the dynamic stuff. When I run my application and test it by changing my screen resolution the page fits the browser perfectly in 1024 x 768, but in 800 x 600 I need to scroll up and down to see the page and in the opposite direction, 1600 x 1200, my page does not fit the whole browser. My footer sits off the bottom of the browser when the screen resolution is 1600 x 1200. I am using CSS on the html tag, body tag and on all my divs and other elements with percentages and ems to control the size and to stop my controls floating round the page. So, I know I am doing the right thing, I am just stuck in getting the page just to resize perfectly in the browser. My aim is to have the page to fit any screen resolution without the need of scrolling.I have tried all sorts of ways to resolve this, and I really need some help in fixing the problem, because I am clean out of ideas.Here is my code, only the relevent bits, though:<html xmlns="http://www.w3.org/1999/xhtml" id="fitwindow"><head runat="server"> <title>Test Page</title> <link href="App_Themes/Theme1/StyleSheet.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder></head><body id="body"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div id="header"> <asp:Label ID="ALabel" runat="server" Text="LABEL"/> <div id="Clock"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server"> </asp:Timer> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </div> </div> <div id="ContentPage"> <div id="MyMenu"> <asp:Menu ID="Menu" runat="server" /> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> <div id="MasterFooter"> <asp:Label ID="FooterLabel" runat="server" Text="Footer" /> </div> </form></body></html>#fitwindow{ height:100%; width:100%; margin:0%; bottom:100%; top:0%; right:0%; left:0%;}#body{ width:100%; height:100%; min-width:40em; max-height:100%; background-color:Gray; margin:0%; top:0%; right:0%; left:0%; font-family:Arial; position:relative;}#header{ top:0%; width:100%; min-height:3em; min-width:40em; background-color:Purple;}#ContentPage{ min-width:35em; width:100%; height:89.25%; min-height:31.75em; position:relative;}#MyMenu{ width:15%; height:100%; float:left; background-color:Purple; min-width:9em; min-height:30em; display:inline;}#MasterFooter{ height:4%; width:100%; clear:both; min-width:40em; min-height:1em; background-color:Purple;}Can anyone help, please? I don't know what I am doing wrong! I really could do with some expert help!Thanks

Link to comment
Share on other sites

Putting all the your extra CSS to a side, I'll just explain the basics of getting pages to resize with the browser window.

  1. Don't give your <div> elements a widthA <div> element will, by default, take the full available horizontal space, subtracting its margins, subtracting its parent's padding, and ignoring its own padding.Therefore, this div will always stretch to the whole screen:
    <div id="container"></div>

    #container {  margin: 20px;  padding: 10px;  border: 1px solid black;  height: 200px;}

  2. A flexible column is just one box taking the full screen, except that the margin on one or both sides is very large, leaving space for other boxes that fit in there. Use the float property to put boxes next to eachother. The HTML code of the floated box must always go before the code of the flexible one:
    <div id="left">Left column</div><div id="right">Right column</div><div id="main">Center column (Flexible)</div>

    div { border: 1px solid black; height: 200px; }#left { float: left; width: 120px; }#right{ float: right; width: 180px; }#main {  margin-left: 130px;  margin-right: 190px;}

  3. Every bit of code that follows a floated element goes next to it, rather than below it (unless there is no more space next to it). If you want something to be placed below, use the clear property.
    <div id="left">Left column</div><div id="bottom">This box goes below the other one</div>

    div { border: 1px solid black; }#left { float: left; width: 120px; height: 200px; }#bottom { clear: both; }

  4. Finally, dealing with heights you must use percentage values, and in order to use percentage values the parent element must have a defined height.If you want a box to take the full screen height you will have to apply 100% to the current element and every last ancestor it has until the <html> element. You cannot allow it to have any margin, padding or borders because this will make it exceed the height of the window.Considering this fragment to be directly inside the <body> element:
    <div id="fullheight">This box takes the full screen height.</div>

    html, body {  margin: 0;  padding: 0;  height: 100%;}#fullheight {  height: 100%;  background-color: blue;}

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...