Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div taller than page but no scroll bar

    I have a div but the page only shows half of it and there is no scroll bar. How can I get one?

    Code:
    <style>
    body{
    background-color:ffaaf5;
    }
    
    #title {
    background-color:ffffff;
    height:8%;
    width:29%;
    left: 35%;
    top: 5%;
    position:fixed;
    border-radius:25px;
    padding:1%;
    text-align:center;
    }
    
    #nav1 {
    background-color:ffffff;
    height:8%;
    width:49%;
    left: 25%;
    top: 20%;
    position:fixed;
    border-radius:25px;
    padding:1%;
    text-align:center;
    }
    
    #content {
    background-color:ffffff;
    height:80%;
    width:79%;
    left: 10%;
    top: 35%;
    position:fixed;
    border-radius:25px;
    padding:1%;
    text-align:center;
    }
    
    </style>
    
    <html>
    
    <div id="title">
    <font size=10> title</font>
    </div>
    
    <div id="nav1">
    nav1
    </div>
    
    <div id="content">
    content</div>
    
    </html>
    Thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello codemuncher38,
    Look what happens when you give the document a height so #title, #nav1 and #content know what to base their percentage heights on.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body { 
    	height: 100%;
    	background: #ffaaf5; 
    }
    h1 {
    	background: #00f;
    	height: 8%;
    	width: 29%;
    	left: 35%;
    	top: 5%;
    	position: fixed;
    	border-radius: 25px;
    	padding: 1%;
    	text-align: center;
    }
    #nav1 {
    	background: #0ff;
    	height: 8%;
    	width: 49%;
    	left: 25%;
    	top: 20%;
    	position: fixed;
    	border-radius: 25px;
    	padding: 1%;
    	text-align: center;
    }
    #content {
    	background: #f0f;
    	height: 80%;
    	width: 79%;
    	left: 10%;
    	top: 35%;
    	position: fixed;
    	border-radius: 25px;
    	padding: 1%;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    	<h1>title</h1>
    	<div id="nav1"> nav1 </div>
    	<div id="content"> content</div>
    </body>
    </html>
    You might want to rethink all the fixed positioning too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •