PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

[CSS] Div zo lang als inhoud / Div over hele hoogte scherm

Door - - op 25-10-2006 21:00
6.623 views
Hoi,

Weer eens een vraagje: "Hoe krijg je een div over de hele hoogte van het scherm?"
Nee, het is niet zó simpel:

<?php
#div
{
    height: 100%;
}
?>

Want de bedoeling is: Ik heb een box (div) met daarin header, menu en de rest van de zooi. Nu moet de content, die een variabele inhoud heeft, zo hoog worden als de ruimte die overblijft. Stel menu + header is 100px, schermhoogte is 800px, de content moet dan 700px worden.
Nu wil ik aub niet met JS, voor de reden ga maar eens even lekker Googlen: [google]nadelen javascript[/google]
Iemand een idee?

Groeten,
Jonathan

[edit]Zie post op pagina 2[/edit]
- -
26-10-2006 10:01
@Martijn: Bedankt.
@Jan: Ook bedankt.
@Willem-Jan: Dan bedanken we jou ook maar! ;)
@Robert: Kan je CSS laten rekenen???
R
Robert Deiman
26-10-2006 10:10
Voor zover ik weet wel, ik heb zoiets eerder bij de hand gehad. CSS kan prima rekenen, ik weet alleen niet meer wat het precies was waarbij gerekend moest worden, maar als het goed is moet het wel werken.. (weet alleen niet of het ook valid is)
- -
26-10-2006 10:16
Ik word er zo gek van dat ik bijna naar frames over wil stappen. Het voorbeeld van jan was erg mooi, maar zelfs díe werkte niet. Ik ga nog wat proberen, maar als ik er niet uit kom zal ik naar frames moeten overstappen :'(
[edit]Ik ben nog wat aan het klooien geweest, kheb de hele layout omgegooid, maar het werd er niet beter op. Ik heb mij eisen iets veranderd:
Ik heb de div #main, waarin de div #menu en #content staan.
Wat ik dus wil is dat als de div #content langer is dan de paginahoogte, dat de hele div #main langer wordt, en niet dat de tekst buiten de div #content loopt. Dus daarmee wil ik dat de div #menu even lang is als de div #content. Iemand een idee? height: auto; werkt ook niet. :([/edit]
- -
01-12-2006 17:00
Ik heb weer hetzelfde probleem...
css:

<?


/* Made by Jonathan Hogervorst */
/* Copyright by Jonathan Hogervorst - Assen - The Netherlands */


*
{
    margin: 0px;
    padding: 0px;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10pt;
    color: #038A4C;
}

html,
body
{
    background-color: #8CCAFF;
    height: 100%;
}

#box
{
    background-color: #038A4C;
    width: 80%;
    height: 80%;
    position: absolute;
    left: 10%;
    top: 10%;
    padding: 10px;
}

#header
{
    background-color: #F0FF89;
    width: 100%;
    height: 123px;
    background-image: url('pictures/logo.jpg');
    background-repeat: no-repeat;
}

#header h1
{
    padding: 5px;
    padding-left: 180px;
    text-align: center;
    font-weight: normal;
    letter-spacing: 5pt;
    font-size: 30pt;
}

#main
{
    background-color: #F0FF89;
    width: 100%;
}

#menu
{
    width: 25%;
    height: 100%;
    float: left;
}

#menu ul
{
    padding-top: 4px;
    padding-left: 5px;
}

#menu li
{
    list-style-type: none;
    text-align: center;
    padding: 0px;
}

#menu li a
{
    display: block;
    text-decoration: none;
    padding: 2px;
}

#menu li a,
#menu li a:link,
#menu li a:active,
#menu li a:visited
{
    border-left: 5px solid #8CCAFF;
    border-right: 5px solid #8CCAFF;
}

#menu li a:hover
{
    border-left: 5px solid #038A4C;
    border-right: 5px solid #038A4C;
    color: #8CCAFF;
}

#content
{
    width: 74%;
    height: 100%;
    float: right;
    overflow: auto;
}

#content h1
{
    background-color: #8CCAFF;
    padding: 10px;
    margin-bottom: 10px;
    border-top: 5px solid #038A4C;
    border-bottom: 5px solid #038A4C;
    border-left: 1px solid #038A4C;
    font-weight: bold;
    font-size: 15pt;
}

p
{
    padding-bottom: 10pt;
}

input,
select,
textarea
{
    border-left: 3px solid #038A4C;
    border-right: 3px solid #038A4C;
    border-top: 1px solid #038A4C;
    border-bottom: 1px solid #038A4C;
    background-color: #F0FF89;
}

.important
{
    background-color: #8CCAFF;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    border-top: 5px solid #038A4C;
    border-bottom: 5px solid #038A4C;
    border-left: 1px solid #038A4C;
}


?>

html:

<?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Drentse AA Zuivel - een bewuste keuze</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <style type="text/css">
            @import "stylesheet.css";
        </style>
    </head>
    <body>
        <div id="box">

            <div id="header">
                <h1>Drentse AA Zuivel<br />een bewuste keuze</h1>
            </div>
            <div id="main">
                <div id="menu">
                    <ul>
                    </ul>
                </div>

                <div id="content">
                    <h1>Home</h1>
                    <p>Welkom!<br />
<br />
lol</p>
                    <noscript><p class="important">U heeft op dit moment JavaScript uitgeschakeld.<br />Hierdoor werken sommige delen van deze website niet helemaal goed.</p></noscript>
                </div>
            </div>

        </div>
    </body>
</html>



?>

hier moeten dis de divs #menu en #content helemaal de div #box vullen.

Groeten,
Jonathan

Reageren

Inloggen om te reageren