VS2008 Master page, scroll only the content

JuggaloBrotha

VB.NET Forum Moderator
Staff member
Joined
Jun 3, 2004
Messages
4,530
Location
Lansing, MI; USA
Programming Experience
10+
I have a master page file that every page on the site uses (they all simply fill in the content). Here's the master page's aspx:
VB.NET:
    <form id="form1" runat="server" class="top_tall">
        <%--header --%>
        <div id="header" style=" position: relative; z-index: 2; ">
            <div class="main">
                <div class="logo">
                    <img src="/images/jb.png" alt="" />
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="/Programs.aspx">Programs</a></li>
                        <li><a href="/Games.aspx">Games</a></li>
                        <li><a href="/Classes.aspx">Classes</a></li>
                        <li><a href="/ContactMe.aspx">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <%--header end--%>
            <asp:ContentPlaceHolder ID="MainBodyContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
            <br /><br /><br />            
        <%--footer --%>
        <div id="footer_row">
            <div class="main">
                <div class="indent"></div>
            </div>
        </div>
        <div id="footer">
            <div class="main" style="cursor:default;">
                <table border="0" width="100%">
                    <tr>
                        <td style="text-align:center;">
                            Made by: <a href="http://www.rkwebcreations.co.uk" target="RKSite" class="style12">RK Web Creations</a> and <a href="http://www.hellotrash.com/" target="TCSite" class="style12">Trash Creative Co.</a><br />
                            Icon by: <a href="http://www.rmxpunlimited.net/forums/index.php?showuser=2909" target="ChaosLink" class="style12">{HV}Chaos</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <%--footer end--%>
    </form>
What I would like to do now is make it so only the content in the middle scrolls so that the header and footer are visible on screen at all times, how would I do that?
 
You'd need to put your ContentPaceHolder inside a <div> and configure that to be a specific size and scroll. I don't know the specifics of the <div> attributes off the top of my head but you should be able to find those. You'll also have to use some script to determine the correct size for the <div> based on the browser window.
 
Back
Top