Div height 100% probleem FF en IE - Softwareontwikkeling

woensdag 12 september 2007 01:38

Acties:

Verwijderd

Topicstarter

Hallo,

Ik ben bezig met een ontwerp voor een site mbv divs die geschikt moet zijn voor IE en FF. Nu heb ik een probleem met height : 100%. Op de site wil ik een achtergrondplaatje over de hele hoogte. Dat is eenvoudig te doen en dit werkt dan ook netjes in IE en FF. Vervolgens wil ik wit tekstvlak die begint 200px van boven en doorloopt tot beneden. Momenteel heb ik height van dit witte teksvlak ook op 100% staan met als gevolg dat er scrollbalk komt die scrollt naar 200px onder mijn achtergrond afbeelding. De bedoeling is dus dat het witte tekstvlak een scrollbalk krijgt en er voor de rest niet gescrollt wordt. Dit heb ik nu :

HTML:

<html>
<head>
<style>

html, body {
    height:100%;
    margin: 0px 0px 0px 0px;
}

div.container {
    position: absolute;
    width: 1000px;
    height: 100%;
    left: 50%;
    top:0px;
    margin-left: -500px;
    background-image: url('background.jpg');
}

div.content {
    position: relative;
    width: 600px;
    height: 100%;
    background-color:#FFFFFF;
    overflow:auto;
    left: 210px;
    margin-top: 200px;      
}

</style>
</head>
<body>
<div class="container">
    <div class="content">
                       content  
    </div>
</div>
</body>
</html>

Ik heb al heel wat gezocht op google en tweakers maar vind alleen topics zonder duidelijk antwoord

woensdag 12 september 2007 01:57

Acties:

Verwijderd

ik ben te moe om zeker te weten of dit is wat je bedoeld, maar:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

misschien heb je er iets aan

het 100% height probleem is overigens iets mytisch en zal misschien wel nooit helemaal 100% worden opgelost

woensdag 12 september 2007 09:09

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 12 september 2007 @ 01:57:
ik ben te moe om zeker te weten of dit is wat je bedoeld, maar:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

misschien heb je er iets aan
het 100% height probleem is overigens iets mytisch en zal misschien wel nooit helemaal 100% worden opgelost

Bedankt voor je reactie, maar het is niet helemaal wat ik bedoel. Als je namelijk veel tekst plaatst in het middelste gedeelte (met overflow:auto) dan wordt de pagina groter en komt er geen scrollbalk in het middelste gedeelte. Ik wil een pagina die in hoogte niet groter wordt dan schermhoogte

woensdag 12 september 2007 14:37

Acties:

Verwijderd

Topicstarter

Ik heb nu wat geprobeerd met een table. Natuurlijk werkt het heel mooi in IE maar niet in FF

In IE krijg ik netjes een tabel die in totaal 100% hoog is met boven en onder een header en een footer. In het middengedeelte komt mooi een scrollbar. In Firefox krijg ik geen scrollbar en wordt de tabel groter dan schermhoogte. Iemand enig idee ?

HTML:

<html>
<head>
<style>

html, body {
    margin: 0px 0px 0px 0px;
    height: 100%;
}

div.container {
    position: absolute;
    width: 1000px;
    height: 100%;
    left: 50%;
    top:0px;
    margin-left: -500px;
    background-image: url('img/background_nl.jpg');
}

table {
    border: 0px;
    height: 100%;
    height: 100% !important;
    width: 600px;
    left: 210px;
    position: absolute;
    table-layout:fixed;
}

div.content {
    height: 100% !important;
    overflow:auto;
}

.contentTR {
    height:100% !important;
}

</style>
</head>
<body>
<div class="container">
    <table border="1">
    <tr style="height:200px;"><td>&nbsp;</td></tr>
    <tr valign="top" class="contentTR"><td>
    <div class="content">
         content   
    </div></td></tr>
    <tr style="height:30px;"><td>&nbsp;</td></tr>
    </table>
</div>
</body>
</html>

woensdag 12 september 2007 17:50

Acties:

Verwijderd

Topicstarter

Ok het is uiteindelijk toch gelukt. Wel met een heel lelijk javascriptje maargoed, ik had het idee dat het niet anders kon. Voor de search hieronder nog even de oplossing

HTML:

<html>
<head>

<script type="text/javascript">

function getHeight() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

function getObj(name){    
    if (document.getElementById){        
        this.obj = document.getElementById(name);        
        this.style = document.getElementById(name).style;    
    }    
    else if (document.all){        
        this.obj = document.all[name];        
        this.style = document.all[name].style;    
    }
}

function resize() {                               
    var oContent = new getObj('container');    
    var height = getHeight();    
    
    oContent.style.height = height;
    
    oContent = new getObj('content');
    
    if (height > 230) {
        oContent.style.height = height - parseInt(230);
    }
    else {
        oContent.style.height = 230;
    }
    
}

</script>

<style>
div#container {
    position: absolute;
    width: 1000px;
    height: 500px;
    left: 50%;
    top:0px;
    margin-left: -500px;
    background-image: url('background.jpg');
}

div#content {
    position: relative;
    width: 600px;
    height: 300px;
    left: 210px;
    top: 200px;
    background-color: #FFFFFF;
    overflow:auto;
}

</style>

</head>

<body onLoad="resize();" onResize="resize();">

<div id="container">
    <div id="content">
                content
    </div>
</div>

</body>
</html>

Met getHeight haal je de afmeting van het innerwindow van de browser op, dit is dus het echte window waar tekst komt (browserwindow zonder toolbars etc). Met getObj maak je een link naar een div toe en met de resize functie kun je dan de size van je divs aanpassen. Door de resize functie aan te roepen bij onload en onresize wordt de div altijd aangepast.

Ik heb dit getest in IE7 en FF2 dus moet redelijk goed werken denk ik.

Dit topic mag dicht, tenzij iemand nog vragen of opmerkingen heeft.

donderdag 13 september 2007 10:46

Acties:

Verwijderd

Dit is makkelijk op te lossen zonder javascript, ik heb zoiets al vele malen gedaan. Heb nu niks bij de hand om het te laten zien, maar kan dit eventueel wel straks plaatsen.

Even wat geprutst in kladblok:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
    body
    {
        width:      100%;
        height:     100%;
        padding:    0;
        margin:     0;
        overflow:   auto;
    }

    div.container
    {
        background: #ffcc00;
        display:    block;
        position:   absolute;
        width:      755px;
        _height:    100%;
        min-height: 100%;
        overflow:   visible;
        left:       50%;
        margin-left:    -387px;
    }
</style>
</head>
<body>
<div class="container">
    content
</div>
</body>
</html>

Getest en werkt in:
- FF2.0
- IE5.5
- IE6.0
- IE7.0

[ Voor 64% gewijzigd door Verwijderd op 13-09-2007 11:30 ]

donderdag 13 september 2007 23:36

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op donderdag 13 september 2007 @ 10:46:
Dit is makkelijk op te lossen zonder javascript, ik heb zoiets al vele malen gedaan. Heb nu niks bij de hand om het te laten zien, maar kan dit eventueel wel straks plaatsen.

Even wat geprutst in kladblok:
HTML:
1
   .. code ..
Getest en werkt in:
- FF2.0
- IE5.5
- IE6.0
- IE7.0

En als ik deze content div wil laten beginnen 200px van top ?? Want daar gaat het juist om.

vrijdag 14 september 2007 08:07

Acties:

Verwijderd

Probeer er eens top: 200px; aan toe te voegen

edit: zal niet werken.. kijk dit eens door http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

[ Voor 54% gewijzigd door Verwijderd op 14-09-2007 08:48 ]

vrijdag 14 september 2007 09:29

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op vrijdag 14 september 2007 @ 08:07:
Probeer er eens top: 200px; aan toe te voegen

edit: zal niet werken.. kijk dit eens door http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

Ik had het idd al geprobeerd met top:200px;

De link die je hier post ben ik ook al tegengekomen (op meerdere plekken trouwens)
Bijna overal gaat het om het oprekken van een div omdat er te weinig data instaat. Bij mij wil ik juist hebben dat er een scrollbar komt in de content div omdat ik te veel data heb, maar wel wil dat de totale hoogte max. 100% is.

vrijdag 19 oktober 2007 19:23

Acties:

XXfrankieXX

Who, me?

Volgens mij moet dit werken:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style> 
    body 
    { 
        width:        100%; 
        height:        100%; 
        padding:    0; 
        margin:        0; 
        overflow:    auto; 
    } 

    div.container 
    { 
        top:        200px;
        bottom:     0;
        background:    #ffcc00; 
        display:    block; 
        position:     absolute; 
        width:         755px; 

        overflow:    visible; 
        left:        50%; 
        margin-left:    -387px; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    content 
</div> 
</body> 
</html>

Dat werkt hier in IE7 en FF. Ik kwam dit topic toevallig tegen omdat ik zelf ook een probleem heb, wat hier enigszins mee is gerelateerd, en waar op internet verder niets over lijkt te staan:
Wanneer ik In een div, met een met css vastgestelde hoogte en overflow:auto een tabel plaats (dat doen de cms gebruikers), verdwijnt in IE6, en naar verluid ook in safari de scroll-balk.

ook heb ik een volgend probleem, wanneer ik met ajax bepaalde html in een pagina zet, worden tekens die normaal als spatie herkent worden, in windows ineens als ? neergezet.
In php spatie's replacen door liet deze speciale "spaties" gewoon staan, zelfs al kopieerde ik ze uit de output of uit de database. Ik verder safari ervan deze gekke tekens erin te zetten via het cms, maar ik beschik zelf niet over OSx

[ Voor 3% gewijzigd door XXfrankieXX op 19-10-2007 20:36 ]