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] height: 100%; werkt niet in IE

Anoniem
None
3 antwoorden
  • Ik heb een zg. sidebar gemaakt @ http://www.nliven.info/.
    Deze is zo hoog als het bezichtbare gedeelte in het browservenster.

    In Fx zie je de goede weergave. IE Laat de achtergrond van de div zien tot de tekst eindigd.

    Ik heb zelf al gezocht naar hacks voor IE, maar ik vond niemand met hetzelfde probleem. Weet iemand wat ik moet veranderen?

    [b:e2982b9eec]stijl.css:[/b:e2982b9eec][code:1:e2982b9eec]body {margin:0; background-color:#ff6669; background-image:url(images/1.gif); font-family:Verdana, sans-serif; font-size:small; letter-spacing:1px}

    #inhoud {width:20em; height:100%; background-color:#ffd166; position:absolute; border-left:5px solid #ffd166; border-right:5px solid #000000}

    h1 {margin-top:0}
    ul {margin-top:0; list-style:none; padding:0}
    #copyright {letter-spacing:0px; font-size:xx-small; color:#666666; line-height:0.9em}

    a {color:#ff6669; font-size:medium; font-weight:bold}
    a:hover {text-decoration:none}

    .klein {font-weight: bold; font-size:xx-small; letter-spacing:0px}[/code:1:e2982b9eec]

    [b:e2982b9eec]index.htm:[/b:e2982b9eec][code:1:e2982b9eec]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>NLiven</title>
    <base target="_top">
    <link href="stijl.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div id="inhoud">
    <h1>NLiven</h1>
    Deze website bestaat uit drie onderdelen. Maak je keuze:
    <ul>
    <li><a href="http://design.nliven.info">Design</a><br>
    NLiven Design maakt goedkope layouts voor websites.</li>
    <li><br><a href="http://personal.nliven.info">Personal</a><br>
    Ik heb ook een persoonlijke website, NLiven Personal.</li>
    <li><br><a href="http://tutorials.nliven.info">Tutorials</a><br>
    Hulpartikelen over Photoshop, computers en websites vind je op NLiven Tutorials.</li>
    </ul>
    <p id="copyright">&copy; 2003-'05 Sybren Wartna.<br>
    Niets van deze website mag gekopieerd worden zonder toestemming van de eigenaar.</p>
    <p><a href="http://validator.w3.org/check?uri=referer" target="_blank" class="klein">HTML W3C Valid</a>,
    <a href="http://jigsaw.w3.org/css-validator/check
    eferer" target="_blank" class="klein">
    CSS W3C Valid</a></p>
    </div>
    </body>
    </html>[/code:1:e2982b9eec]
  • Het is een bekend probleem, zijn wel meer mensen met dat probleem… Door even te zoeken met Google op de woorden 'css "height: 100%"' vind je bijv. op Quirksmode een oplossing.

    Heb je meerdere kolommen en wil je die even lang krijgen, dan zijn er diverse oplossingen te vinden.
  • volgens mij is dit niet het bekende probleem. Het bekende probleem is dat juist ff en opera het maar zo lang doen als je venster groot is en niet als je tekst, waardoor vele colom layouts in eerste instantie net goed werken.

    Maar volgens mij wil de TS dat juist in dit geval en probeert het IE zo gek te krijgen om ook alleen maar de vensterhoogte aan te houden. Waarom snap ik niet helemaal, want de site werkt bij mij beter in IE dan in FF. Als ik in FF een pagina in een klein venster open en hem daarna groter maakt, valt een groot deel van de tekst buiten het gele kader en wordt onleesbaar. In IE gaat dit gewoon netjes goed.

    Maar goed, wil je het toch erg graag dan denk ik dat je met javascript aan de slag moet en de vensterhoogte moet uitlezen:

    http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=16

Beantwoord deze vraag

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