Content placeholder - height=100% ??? : The Official Microsoft ASP.NET Forums

Reply

Shifty001

Member

78 Points

182 Posts

Content placeholder - height=100% ???

Mar 31, 2012 07:05 PM|LINK

Hi all,

Anyone know of a way to make a content placeholder fill a browser 100%, even with no, or small amount of content?

In my mobile web form ive got navigation buttons that sit just below the content placeholder, and it looks stupid on pages with a small amount of content, the buttons are half way up the page!

Any wizards out there!? :)

Moved by XIII on Mar 31, 2012 07:11 PM

Reply

mameenkhn

Contributor

2026 Points

391 Posts

Re: Content placeholder - height=100% ???

Mar 31, 2012 07:17 PM|LINK

add a <div style="width:1px; height:600px; position:relative; float:left" ></div>

inside the content placeholder

Please 'Mark as Answer' if my post helped you
--------------------------------------------------
Muhammad Amin
محمد امين

Edited by mameenkhn on Mar 31, 2012 07:19 PM

Reply

Shifty001

Member

78 Points

182 Posts

Re: Content placeholder - height=100% ???

Mar 31, 2012 09:24 PM|LINK

Hi mameenkhn, thanks for the reply...

Thats wired, it works in the designer but not when I run it in the browser!!!

any ideas? Would somehting be overriding it? Ive got no 'Height' attributes in my CSS.

Reply

iecustomizer

Member

404 Points

82 Posts

Re: Content placeholder - height=100% ???

Mar 31, 2012 10:27 PM|LINK

Hi,

add the global style rule (usually done in a reset.css)

html body{height:100%}

What documentMode does the IEDeveloper show when you run your page in the browser.

Reply

roopeshreddy

All-Star

20277 Points

3349 Posts

Re: Content placeholder - height=100% ???

Apr 01, 2012 02:40 AM|LINK

Hi,

You can consider CSS Media Queries for Mobile web forms!

http://css-tricks.com/css-media-queries/

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

Reply

mameenkhn

Contributor

2026 Points

391 Posts

Re: Content placeholder - height=100% ???

Apr 01, 2012 04:18 AM|LINK

Shifty001

Hi mameenkhn, thanks for the reply...

Thats wired, it works in the designer but not when I run it in the browser!!!

any ideas? Would somehting be overriding it? Ive got no 'Height' attributes in my CSS.

Put rest of your content of your content page in another div after the div which i mentioned set its width to the page width minus 1 and postion : relative ; float : left

you can achieve it in master page...

<div class="prop">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
You content goes here
</asp:ContentPlaceHolder>

//styles

.prop
{
height: 800px;
float: left;
width: 1px;
background: #fafafa;
}

.clear
{
clear: both;
height: 1px;
overflow: hidden;
}

Please 'Mark as Answer' if my post helped you
--------------------------------------------------
Muhammad Amin
محمد امين

Edited by mameenkhn on Apr 01, 2012 06:06 AM
Edited by mameenkhn on Apr 01, 2012 06:06 AM
Edited by mameenkhn on Apr 01, 2012 06:07 AM
Marked as answer by shifty001 on Apr 06, 2012 09:38 PM

Reply

Shifty001

Member

78 Points

182 Posts

Re: Content placeholder - height=100% ???

Apr 01, 2012 06:55 PM|LINK

Hello all, thank you for the help, but I still cannot get any to do as their told!!!

Here is my MatserPage.master code:

%@ Master Language="C#" AutoEventWireup="true" CodeFile="Mobile.master.cs" Inherits="Mobile_Mobile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width" />
    <link href="MobileStyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server"
    style="width: 980px; height: 100%; margin-left: 0px; margin-bottom: 0px; margin-top: 0px">
    <div class="page">
        <div class="header">
            <asp:Image ID="headerImage" runat="server" ImageUrl="~/Images/MobileHeader.png"
                AlternateText="Pay-n-Go" ImageAlign="Middle" Width="980px" style="margin-left: 0px"/>
        </div>
        <div class="clear menuDiv">
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" >
                
            </asp:ContentPlaceHolder>
        </div>
        <div class="navMenu">
            <asp:Button ID="HomeBtn" runat="server" Text="HOME" height="100px" Width="24%"
                BackColor="#FF9900" Font-Bold="True" Font-Size="XX-Large" ForeColor="White"
                PostBackUrl="~/Mobile/Default.aspx" ValidationGroup="G2" />
            <asp:Button ID="LoginBtn" runat="server" Text="LOGIN" height="100px"
                Width="24%" BackColor="#FF9900" Font-Bold="True" Font-Size="XX-Large"
                ForeColor="White" PostBackUrl="~/Mobile/MobileLogin.aspx"
                ValidationGroup="G2"/>
            <asp:Button ID="SignUpBtn" runat="server" Text="SIGN UP" height="100px"
                Width="24%" BackColor="#FF9900" Font-Bold="True" Font-Size="XX-Large"
                ForeColor="White" PostBackUrl="~/Mobile/Register_1.aspx"
                ValidationGroup="G2"/>
            <asp:Button ID="PayBtn" runat="server" Text="PAY" height="100px" Width="24%"
                BackColor="#00CC00" Font-Bold="True" Font-Size="XX-Large" ForeColor="Blue"
                PostBackUrl="~/Mobile/Secure/MobilePayment.aspx" style="margin-left: 0px"
                ValidationGroup="G2" />
        </div>
    </div>
    </form>
</body>
</html>

I have tried the <div style> in the content placeholder, is this right or should it be outside the cph?

 <div class="main">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" >
                <div style="width:1px; height:600px; position:relative; float:left" ></div>   
            </asp:ContentPlaceHolder>
        </div>

I have also tried, inside the <Head> tag:

<style type="text/css">
      * {
            padding: 0;
            margin: 0;
        }
        html, body
        {
            height: 100%;
        }
        body 
        {
            font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
            font-size: 75%;
        }
        h1 
        {
            font-size: 1.4em;
            padding: 10px 10px 0;
        }
        p 
        {
            padding: 0 10px 1em;
        }
        #main 
        {
            min-height: 100%;
            background-color: #DDD;
            border-left: 2px solid #666;
            border-right: 2px solid #666;
            width: 676px;
            margin: 0 auto;
        }
        * html #main 
        {
            height: 100%;
        }
    </style>

Which is from a tutorial for this height=100% problem!

And I tried;

.clear and .prop example shown above.... Can anyone see what Im doing wrong?