Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[css] DIV schermvullend

jarneke
7 antwoorden
  • vroeger had ik op mijn website een tabel:
    [code:1:31fea8d22b]
    <table width="100%" height="100%">
    <tr height="15">
    <td>Menu</td>
    </tr>
    <tr height="*">
    <td>Inhoud</td>
    </td>
    </table>
    [/code:1:31fea8d22b]

    Nu wil ik die tabel dus vervangen door divs.
    Ik heb dit:
    [code:1:31fea8d22b]
    <head>
    <style type="text/css">
    #inhoud{

    }
    </style>
    </head>

    <body>
    <div id="menu">
    Menu
    </div>
    <div id="inhoud">
    Inhoud
    </div>
    </body>
    [/code:1:31fea8d22b]


    Maar wat moet ik dan invullen bij
    #inhoud{

    }

    zodat ik hetzelfde effect krijg als height="*" bij tabellen?

    Ik druk vanalles in google maar ik vind het echt niet :s
  • Wat je nodig hebt is faux columns, een work-around die nodig is omdat Internet Explorer het begrip height: 100%; niet snapt. Zoek maar even op google of dit forum, dan kom je aardig wat tutorials tegen.
  • [quote:304558b606="jarneke"]Ik heb dit:
    [code:1:304558b606]
    <head>
    <style type="text/css">
    #inhoud{

    }
    </style>
    </head>

    <body>
    <div id="menu">
    Menu
    </div>
    <div id="inhoud">
    Inhoud
    </div>
    </body>
    [/code:1:304558b606][/quote:304558b606]Zoals Ger al zegt: faux columns is waarschijnlijk de oplossing.

    Maar let je er bij je nieuwe code ook even op dat je een goede doctype gebruikt en dat een div-element alleen zgn [i:304558b606]block level elements[/i:304558b606] mag bevatten, dus niet direct platte tekst? Je code hierboven suggereert namelijk dat je dat misschien nog niet weet.

    Overigens heb ik nog wel een tip: plaats een container-div in je body om de functie van de body over te nemen. Dat is CSS-technisch wel zo handig en scheelt je later een hoop onnodige problemen.

    - Bas
  • Oke, kga eens wat zoeken over die faux columns :p

    Bas, bedankt ook voor je tips!
  • Kan je aan een div een hoogte geven van bvb
    100% min 15px

    Dus stel het volledige scherm 500px hoog is, dan moet die div 485px hoog worden
  • Nee, in principe niet, al staat het wel op de planning voor toekomstige versies. Een manier om hetzelfde te bereiken is met margin of padding te werken.

    - Bas
  • Dat kan dus wel (met behulp van margin en padding dus), had het er laatst in een andere draad al over en ik heb ook gevonden hoe ik er aan gekomen was:
    http://www.sceneone.nl/elements/drie_kolommen2.htm[code:1:f5ece06fb9]body, html{
    margin: 0;
    height: 100%;
    }

    #main_container{
    min-height: 100%;
    _height: 100%; /* IE6 hack */
    margin: -30px 0 0 0;
    }

    #footer_container{
    height: 25px;
    padding: 5px 0 0 0;
    background: #000;
    width: 100%;
    text-align: center;
    color: #FFF;
    }
    [/code:1:f5ece06fb9]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.