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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...