Jump to content

Problems with the size of the page


Recommended Posts

Hi guys.


I'm having the strangest problem right now, and I really need you help to figure it out. The footer stays nicely at the bottom of the page, but the content is not maxing out all the way down to the footer. The content of the left floater decides the height. If there is little content, it stays high on the page, and if I fill it up, it causes the whole page to overflow (scroll), not just the left floater. Here's what I wish to achieve:


1. Navbar on top.

2. Content with no margin to the navbar.

3. Footer just below the content, no margin.

4. Show the whole page on the screen without the need to scroll.

5. No change in the navbar-content-footer connection when zooming.

6. Keep the footer to the bottom, and keeping content from bleeding into the footer.


Thanks for your time!



<!DOCTYPE html><html><head>	<title>NAME</title>    <link href="css/Style3.css" medio="screen" rel="stylesheet" type="text/css"/>    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>        <!-- check if screen is no more than 480: if( screen.width <= 480 ) {    location.href = '/mobile.html';}-->    </style></head><style>    body    {        background-color: blue;        background-repeat: no-repeat;        background-attachment: fixed;        background-position: left;        background-size: cover;    }    li#nameofmine a p{    border-bottom: 1px solid white;    font-weight: 700;}    li#nameofmine:hover > a p{    color: black;    border-bottom: 1px solid black;}</style><body>    <div id="wrap">        <div id="main">    <nav>    <ul>        <li id="nameofmine"><a href="#"><p>NAME</p></a></li>        <li><a href="#"><p>Read</p></a></li>        <li><a href="#"><p>Listen</p></a>            <ul>            <li><a href="#"><p>Videos</p></a></li>            <li><a href="#"><p>Recordings</p></a></li>            </ul></li>        <li><a href="#"><p>Look</p></a></li>        <li><a href="#"><p>Contact</p></a></li>        </ul>    </nav>    <div id="flags">     <a href="index2.html"><div id="flag1"><h4 style="margin-top: 10%;">1</h4></div></a>        <a href="index.html"><div id="flag2"><h4 style="margin-top: 10%;">2</h4></div></a>    </div><div id="leftbar">    <div id="news"><h3>NEWS</h3><p>Website is under construction. More will follow. Soon.</p></div>    </div>            </div></div>    <footer>        <p>© Copyright 2014 NAME. All rights reserved.</p>        </footer>    </body></html>


html {height: 100%}body{    font-family: 'open sans', 'courier';	font-size: 16px;	color: white;    text-align: center;    margin: 0;    font-weight: 100;    height: 100%;}body a{    color: white;    text-decoration: none;}h1{    font-size: 5em;	line-height: 0.2em;	color: white;}h3{    font-size: 18px;    font-weight: 100;    color: white;    text-align: center;    text-decoration: underline;}h2{    font-size: 20px;    font-weight: 100;    color: white;}#wrap{    min-height: 100%;}#main{    overflow: auto;    padding-bottom: 3em;    }#flags{    height: 2em;	width: 6em;    position: absolute;    right: 0%;    top: 0%;    font-size: 16px;}#flag1{    height: 2em;	width: 49%;    float: right;    border-left: 1px solid white;    background-size: cover;    background-position: center;    background-color: red;}#flag2{    height: 2em;	width: 49%;    float: left;    background-size: cover;    background-position: center;    background-color: green;}#flag1:hover{    opacity: 0.5;}#flag2:hover{    opacity: 0.5;}nav ul {    position: relative;    width: 100%;    margin-top: 0;    margin-bottom: 0;    padding: 0;    list-style: none;    color: white;    font-family: 'Open Sans';    font-size: 16;    background-color: rgba(255, 255, 255, 0.3); }nav ul li{    text-align: center;    display: inline-block;    position: relative;}nav ul a{    display: inline-block;    float: none;    padding: 1em 3em;    letter-spacing: 1px;    color: #eaebed;}nav ul li:hover > a{    color: black;}li#nameofmine{    text-align: center;    display: inline-block;  }li#nameofmine a p{    display: inline-block;    float: none;    font-weight: 700;    color: white;}li#nameofmine:hover > a p{    color: black;}*html nav ul li a:hover/* IE6 */{    color: #000;}nav ul li:hover > ul {    display: block;}/* Sub-menu */nav ul ul {    list-style: none;    margin: 0;    padding: 0;    display: none;    position: absolute;    left: 0;    top: 100%;    width: 100%;    z-index: 99;}nav ul ul li {    float: none;    margin: 0;    display: block;}nav ul ul li:last-child {     box-shadow: none;}nav ul ul a {        padding: 0.2em 1em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;}*html nav ul ul a { /* IE6 */       height: 10px;    width: 150px;}*:first-child+html nav ul ul a { /* IE7 */        height: 10px;    width: 150px;}nav ul ul a:hover {   }nav ul ul li:first-child a {    }nav ul ul li:first-child a:after{    content: '';    position: absolute;    left: 45%;    top: -10px;    width: 0;    height: 0;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-bottom: 10px solid white;}nav ul ul li:first-child a:hover:after {    border-bottom-color: black; }nav ul ul li:last-child a {    }/* Clear floated elements */nav ul:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";    clear: both;    height: 0;}* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */#leftbar{    float: left;    left: 0;    top: 0;    width: 20%;    height: 100%;}#news{    height: 100%;    width: 98%;    margin-left: 2%;    border-left: 0px;    border-top: 0px;    border-right: 1px;    border-bottom: 0px;    border-color: white;    border-style: solid;    font-weight: 100;    text-align: left;    overflow: auto;}footer{    height: 3em;    width: 100%;    background-color: rgba(255, 255, 255, 0.3);     text-align: center;    clear: both;    position: relative;    margin-top: -4em;}
Link to comment
Share on other sites

Just wanted to let you know that Jacob Johansson over on stackoverflow.com provided expert help on the matter. By adding this function to the css, it worked like a charm.

#main{height: calc(100% - 8.5em);}

Check out the jsfiddle: http://jsfiddle.net/EP8b6/ and fullsize: http://jsfiddle.net/EP8b6/embedded/result/


If there are any other solutions to this problem, please let us know.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...