• 0

ASP/Master Pages. How To Set Div 100% Of The Browser Height?

Asked by Joni_78,

 Share

Question

Grand Master

Joni_78

Posted
Posted

I've done this with Visual Studio 2010. Defining body, html or div height as 100% in CSS doesn't work. Is there some other way this has to be done with master pages?

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="footer">    
        </div>
    </div>
    </form>
</body>
</html>

MainContent

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="Default2"%>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div>
        blaa blaa blaa
    </div>
</asp:Content>

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
Grand Master

Cupcakes

Posted
Posted

Without seeing your CSS itself, I can't help you, however there have been a few threads on Neowin asking about 100% height divs already. I've put in a few resource links in 'em that you can check out:

https://www.neowin.net/forum/topic/930830-a-little-css-help-please/page__st__15__p__593046498__hl__100%25__fromsearch__1entry593046498

https://www.neowin.net/forum/topic/904412-css-making-columns-the-same-length/

https://www.neowin.net/forum/topic/901010-css-height/

That should help you get that figured out :)

By the way, CSS/HTML has nothing to do with ASP (or MasterPages) so there's no real specific way it needs to be done with Visual Studio or anything..

Link to comment
Share on other sites
  • 0
Grand Master

Joni_78

Posted
  • Author
Posted

Thx for the links, I double checked that I've done everything right and I think I have. I've done this before with Dreamweaver by setting the html, body and container height to 100% but in Visual studio it doesn't seem to work. Setting div height to pixel value has an effect but using any percentage value doesn't seem to have any effect.

Here is the css

/* DEFAULTS
----------------------------------------------------------*/

html
{
	height: 100%;
}

body   
{ 
    height: 100%;
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    float: none;
	height: 100%;
    width: 960px;
    background-color: #fff;
    margin: 0px auto 0px auto;
    border: 3px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;

}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #000;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

Link to comment
Share on other sites
  • 0
Grand Master

Joni_78

Posted
  • Author
Posted

You should be using an actual browser (Chrome, Firefox, IE8, Opera) to render your website's html/css and not Visual Studio.

I used a browser (IE8).

Link to comment
Share on other sites
  • 0
Proficient

neoraptor

Posted
Posted

Here is the complete website, could someone take a look at it? I just can't figure out why this works with normal html pages but not with asp.

ws.zip

See the rendered html, probably asp is putting some extra container. I suggest using firefox + firebug.

Link to comment
Share on other sites
  • 0
Veteran

DeathLace

Posted
Posted

I believe that because <div class="page"> is a child of <form>, you need to set form in CSS to also be 100% height, since it goes

html -> body -> form -> .page

But your CSS is doing html -> body -> .page

Link to comment
Share on other sites
  • 0
Grand Master

Joni_78

Posted
  • Author
Posted

I believe that because <div class="page"> is a child of <form>, you need to set form in CSS to also be 100% height, since it goes

html -> body -> form -> .page

But your CSS is doing html -> body -> .page

Thank you :)

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.