master template pages wont scroll

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Oliver Boardman 19 posts 130 karma points

Apr 13, 2016 @ 10:16

Hi, i'm fairly new to Umbraco. I have a separate homepage template that works fine, but on my master template any @RenderBody() content wont scroll when it goes beyond the screen boundaries. Here's my master template and main css:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{Layout = null;}
<!doctype html lang="en">   
    <head>
        <script>
            function myFunction() {
                document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
            }
        </script>

        <title>
            Xarios Technologies
        </title>            
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/stylemain.css">
        <link rel="stylesheet" type="text/css" href="css/footer.css">
        <link rel="stylesheet" type="text/css" href="css/topnav.css">
        <link rel="stylesheet" type="text/css" href="css/buttons.css">
        <link rel="stylesheet" type="text/css" href="css/contact1.css">
        <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
    </head> 
    <body>
        <div id="header">       
            <a href="/home"><img id="logo" src="media/images/horizontal-S-small.png" alt="Xarios Logo" /></a>               
                    <ul class="topnav">
                        <li><a href="/about-us">About Us</a></li>
                        <li><a href="#">OEM</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li class="icon">
                        <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
                      </li>
                    </ul>
                </div>
        <div id="content">
            @RenderBody()       
        </div>
        <div id="footer">   
            <div id="foot-contents">
                @Umbraco.Field("footItems")
            </div>
        </div>
        </div>  
    </body> 
</html>

    html {
    width:100%; 
    height:100%;
    overflow-y:scroll;
}
body {
    font-family:Arial, Helvetica, sans-serif;   
    margin:0;
    height:100%;
    max-width:100%;
}
h1 {
    color:#003399;  
}
h2 {
    color:#0099ff;
    font-weight:lighter;
}
h3 {
    font-weight:lighter;    
}
p { 
    font-size:12px;
}
a {
    color: #00ccff; 
}
a:hover {
    color: #ff9900; 
}
.spacer {
    height:100px;   
}
#header {
    width:100%;
    height:75px;
    background-color:#fff;
    position:fixed;
    margin-top:0px;
    z-index:9;
}
#logo {
    margin:10;
    width:100%;
    max-width:400px;
    height:auto;
}
#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding-top:80px;
    padding-bottom:40px;
}

I'm pulling my hair out over this. Can anyone help?

Copy Link

Jinesh Kaneriya 22 posts 155 karma points

Apr 13, 2016 @ 12:33

100

Hi,

change height:100 % to min-height:100%

Copy Link
Oliver Boardman 19 posts 130 karma points

Apr 13, 2016 @ 12:40

0

That got it!

Thanks very much :)

Copy Link
is working on a reply...

Please Sign in or register to post replies