Hallo iedereen!

Ik had van een vriendin een site gekregen waar ik de content moest fixen.
Het probleem is het volgende. Ze wilt dus de website zonder scroll hebben. En wanneer de content de groot word komt er een scroll voor de content.
Nu was ik al zover om een scroll toe tevoegen maar wanneer ik deze height: meegeef neemt de content die groote aan en meer ook niet, dus op grotere resoluties krijg je een grote witte spatie: http://fastwebdev.be/itdesigns/overig/1.jpg

Wanneer ik dan height: auto; doe gaat de hele pagina in zijn volledige lengte waardoor ik dus enkel de hele pagina kan scrollen. : http://fastwebdev.be/itdesigns/overig/2.jpg

Iemand enig idee hoe dit te fixen is?

CSS:

Code:

body {
    background:url(images/bg-body.png) no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-color:#8CAFD0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:8px; 
    } 
    
img {
    border:0;
    }
p {
    margin-bottom:1.75em;
    font-family: Verdana, Geneva, sans-serif;
    }
a {
    text-decoration:none;
    color:#B4C835;
    }
a:hover {
    text-decoration:none;
    color:#6CC7DC;
    }
#wrapper {
    margin:0 auto;
    width:699px;
    background:#ffffff;
    font-size:1.20em;
    }
#header {
    height:140px;
    background:url(images/bg-header.png) no-repeat;
    margin-left: -1px;
    margin-top: -16px;
    }
#menu {
    height:35px;
    line-height:35px;
    background:url(images/bg-menu.png) repeat-x;
    padding: 0 10px;
    margin-left: -1px;
    margin-top: -8px;
    }
#sidebar {
    float:right;
    width:180px;
    background:#efefef;
    margin-right:20px;
    }
#content {
    width: 500px;
    height: auto;
    overflow-y: scroll;
    margin-left: -1px;
    margin-top: auto;
    margin-bottom: auto;
    }
#footer {
    position: absolute;
    clear:both;
    height:35px;
    width: 700px;
    background:url(images/bg-footer.jpg) no-repeat;
    margin-left: -1px;
    margin-right:auto;
    bottom: 0px;
    }
    
.entry {
    padding:5px 10px;
    text-align:justify;
    line-height:1.75em;
    }
.entry-title {
    font-size:1.90em;
    font-weight:normal;
    letter-spacing:-1px;
    padding: 15px 0px;
    color:#003366;
    }
#menu ul {
    list-style-type:none;
    }
#menu li {
    float:left;
    }
#menu li a {
    padding:0 15px;
    display:block;
    color:#ffffff;
    margin-right:2px;
    }
#menu li a:hover {
    background:url(images/bg-menu-hover.png) no-repeat center center;
    }
#sidebar ul {
    list-style-type:none;
    margin-top:10px;
    }
#sidebar li {
    }
#sidebar li a {
    display:block;
    height:20px;
    line-height:20px;
    color:#222222;
    padding-left:5px;
    border-bottom:1px solid #dddddd;
    }
#sidebar li a:hover {
    background:#edebed;
    color:#6CC4D8;
    }
#footer-valid {
    float:left;
    padding-top:20px;
    padding-left:20px;
    cursor:default;
    color:#ffffff;
    }
#footer-valid a {
    color:#ffffff;
    text-decoration:none;
    }
#footer-valid a:hover {
    color:#ffffff;
    text-decoration:underline;
    }
h1 {
    font-size:2.5em;
    font-weight:normal;
    cursor:default;
    position:relative; top:50px; left:5px;
    letter-spacing:1px;
    color:#003366;
    font-style:italic;
    }

height:100%;
al geprobeerd?

clear: both;
?

raar, misschien een fout in je index.html ?

Marco,

In de layout die jij based lijkt het me makkelijker als je gewoon met een standaard div werkt waar geen hoogte is ingesteld. Op die manier hoef je ook geen scroll in te stellen en een height:100%.

Wil je het toch, dan moet je alle div's (waarin de content zit) een height:100% geven, inclusief de body en de html tag. Een div kan nl. alleen height:100% zijn, als z'n 'ouder' dat ook is.