CODEWITHSUNDEEP
asp.nethtmlcssheight
IT_INFOhUb
IT_INFOhUb

Reputation: 516

How to fix height respective screen resolution?

I have posted Image of my webpage and also posted html code and CSS which I apply on it.

I want that my #main should display with fixed height on the page as a respective laptop resolution. So how much size should I give it? Another issue I'm getting is that, when I try to give height to it, it does not apply. My #main contains a footer too. What changes do I need to apply this in my css? My #main expands in height when I load any content in it. But I want that its height should be fixed.

enter image description here

HTML

<html>
<head>
<title> Index </title>
        <link type="text/css" rel="stylesheet" href="../Content/Site.css">
        <script type="text/javascript" src="../../Scripts/jquery-1.9.1.min.js">
        <script type="text/javascript" src="../../Scripts/jquery.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftAjax.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js">
        <script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js">
        <script type="text/javascript" src="../../Scripts/modernizr-1.7.min.js">
        <link type="text/css" rel="stylesheet" href="../Content/menu.css">
        <script type="text/javascript" src="../../Scripts/menu.js">
</head>

<body>
<div class="page">
     <header>
        <table id="header">
        <div id="menu">
        <ul class="menu">
        <li class="current">
        <li>
        <a href="/CRMDashboard/Dashboard">
        </li>
        <li>
        <a class="parent" href="/CRM/Index">
        <div>
        </li>
        <li>
        <a class="parent" href="#">
        <div>
        </li>
        <li>
        <a class="parent" href="#">
        <div>
        </li>
        <li>
        <a href="/FilterCRMRequest/Index">
        </li>
        <li>
        <a href="#">
        </li>
        <li class="back" style="left: 30px; width: 100px; display: block; overflow: hidden;">
        <div class="left"></div>
        </li>
        </ul>
        </div>
    </header>
<section id="main">
    <h2>Index</h2>
        <footer>
                <hr>
                <p> Copyright (c) 2012 </p>
                <hr>
        </footer>
</section>

</div>
</body>
</html>

CSS

body {
    background: none repeat scroll 0 0 rgba(0, 117, 149, 0.9);
    color: #000000;
    font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
    font-size: 0.85em;
    height: 100%;
    margin: 0;
    padding: 0;
}


.page {
    margin-left: auto;
    margin-right: auto;
    width: 98%;
}

header, #header {
    border: 0 none;
    color: #000000;
    margin-bottom: 0;
    padding: 0;
    position: relative;
}
header, footer, nav, section {
    display: block;
}

header, #header {
    color: #000000;
}

#main {
     padding: 30px 30px 15px;
background-color: #fff;
border-radius: 4px 4px 4px 4px;
top:50px;
bottom:10px;
/*position:fixed;*/
right:10px;
left:10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

}
footer, #footer {
    background-color: #FFFFFF;
    border-radius: 0 0 4px 4px;
    color: #999999;
    font-size: 0.9em;
    line-height: normal;
    margin: 0;
    padding: 10px 0;
    text-align: center;
}

CSS For menu

div#menu {
    background: url("images/main-bg.png") repeat-x scroll 0 0 transparent;
    height: 41px;
}


div#menu ul.menu {
    padding-left: 30px;
}
div#menu ul {
    border-radius: 0 0 4px 4px;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

div#menu li {
    background: url("images/main-delimiter.png") no-repeat scroll 98% 4px transparent;
}
div#menu li {
    border-radius: 0 0 4px 4px;
    display: block;
    float: left;
    margin: 0;
    padding: 0 5px 0 0;
    position: relative;
    z-index: 9;
}

I want output like this:

enter image description here

I also want that my #main display scroll bar when content load more ... rather than scroll bar display of browser.

these are my menus:

enter image description here

I can solve out problem by using position:fixed in #main but when I use it .. My #main gets overwrite on menus.

enter image description here

Upvotes: 3

Views: 3739

Answers (4)

Toni
Toni

Reputation: 442

google for "Fluid Height Layout". you'll get many examples.

This example achieves what you are asking for.

Here's one more

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

on newer browsers you can set the height of your section dinamycally using the calc() function, e.g.

html, body, .page { 
    height: 100%;
    margin: 0; padding: 0;
}

header {
  height: 100px;
}

section {
   height: -webkit-calc(100% - 110px);
   height: -moz-calc(100% - 110px);
   height: calc(100% - 110px);
   border: 1px red solid;
   overflow: auto;
}

Example dabblet: http://dabblet.com/gist/5308785

Browser supporting calc(): http://caniuse.com/calc

Upvotes: 1

I_Debug_Everything
I_Debug_Everything

Reputation: 3816

I guess you should'nt apply static height/ or give fixed height to it, although you can do it using javascript/jquery From the image you posted, i guess following css should be your solution.

Added css to your #main 

  top:50px;
    bottom:10px;
    position:fixed;
    right:10px;
    left:10px;

Edit: Added overflow:auto in #main Demo: http://jsfiddle.net/hEGms/2/

Upvotes: 1

Elad Lachmi
Elad Lachmi

Reputation: 10561

From the w3c specification:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

...

Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

By this logic, if you need an element to apply styles to, you need a div. The <section> tag is a semantic tag and not a functional one. Inside your section tag you should have a div element holding the content and it should be the target for CSS styling.

EDIT: Also, since <section> is an HTML5 element, if you are using older browsers, you need to set it to display: block explicitly.

Upvotes: 1

Related Questions