Div afmetingen afhankelijk van afmetingen

[Verwijderd]

Het probleem is het volgende (en al vaker gesteld op GoT, maar ik kom er niet uit met behulp van die topics).

Mijn website bestaat uit een table met 4 vakken A t/m D. Zie plaatje.


In vak C moet een div komen met een scrollbar. De afmetingen van die div zijn afhankelijk van de grootte van de pagina.

De andere vakken hebben vaste afmetingen:
A: hoogte: 120px, breedte: 100%
B: breedte: 120px
D: hoogte: 30px; breedte 100%

Na enig zoeken vond ik hier op GoT de volgende code:

code:

<script type="text/javascript">
    function docHeight () {
        return (!window.innerWidth) ? document.body.clientHeight : window.innerHeight;
    }
    function docWidth () {
        return (!window.innerWidth) ? document.body.clientWidth : window.innerWidth;
    }
</script>

Deze code genereert de afmetingen van het totaal. Dus voor de afmetingen geldt dan:
docHeight=hoogte A + hoogte C + hoogte D
docWidth=breedte B + breedte C

Oftewel: als ik de hoogte van C wil weten, hoef ik alleen maar de hoogte van A en D af te trekken van docHeight().
En voor de breedte van C hoef ik alleen maar de breedte van B af te trekken van docWidth.

Klopt mijn redenatie tot dit punt?

Dus heb ik voor de div in vak C de volgende code:
<div style="height:'docHeight() - 150'; width:'docWidth-120'; overflow: auto">

Waarom werkt dit niet? Ik ben een absolute n00b wat betreft JS, dus best kans dat ik daar de fout inga.

[JoeKurr]

Zat zelf ook met dat probleem.

Ik heb het opgelost met een tabel voor de 'regels' en div's voor de kolommen.

In jouw geval zou je dan een tabel kunnen maken van 3 regels en 1 kolom.
Vlak A en D zijn dan cellen in de tabel, en B en C zijn div's in de middelste regel.

Als er iemand is die weet hoe je dit puur met div's kan doen, houd ik me aanbevolen

[Verwijderd]

En welke breedte geef je in dat geval aan de div die in plaats komt van kolom C? Je wil toch nog steeds de breedte/hoogte weten?

[JoeKurr]

Voor A en D zet je de breedte op 100% en de hoogte zet je vast met bijvoorbeeld 50px.
B en C maak je de hoogte 100% en B zet je met float:left tegen de linkerkant aan.
De breedte van B geef je ook aan (bv. 100px).
Voor C zet je margin-left gelijk aan de breedte van B (100px dus).
De breedte van C wordt automatisch uitgevuld tot de rechterkant van je browser.
Eventueel kun je nog scrollbars toevoegen door overflow:auto op te nemen voor de divs waar je dat wil (C bjivoorbeeld)

[BtM909]

JoeKurr schreef op 18 februari 2004 @ 13:47:
Voor A en D zet je de breedte op 100% en de hoogte zet je vast met bijvoorbeeld 50px.
B en C maak je de hoogte 100% en B zet je met float:left tegen de linkerkant aan.
De breedte van B geef je ook aan (bv. 100px).
Voor C zet je margin-left gelijk aan de breedte van B (100px dus).
De breedte van C wordt automatisch uitgevuld tot de rechterkant van je browser.
Eventueel kun je nog scrollbars toevoegen door overflow:auto op te nemen voor de divs waar je dat wil (C bjivoorbeeld)

Dat gaat niet werken, vriendelijke vriend. Aangezien B (en ook C) relatief staan tov de body, krijg je 100% hoogte van de body mee

[Verwijderd]

Bij werkt die methode voor geen meter. Misschien dat ik iets fout doe?

De stylesheets voor deel B en C zijn als volgt:

code:

div.B {
    background-color: #000080;
    vertical-align: top;
    float: left;
    overflow: hidden;
    width: 120px;
    height: 100%;
}
div.B {
    overflow: auto;
    width: auto;
    height: 100%;
    left: 120px;
}

[Verwijderd]

Ik zou natuurlijk op de plaats van kolom C een iframe kunnen gebruiken, ware het niet dat in deel A een dropdown-menu zit.

En als ik me niet vergis, kan dat niet over een iframe vallen

[Rickets]

Voor een oplossing zonder javascript kan je eens proberen deze layout aan te passen (als ik het goed begrepen heb).

[ Voor 10% gewijzigd door Rickets op 18-02-2004 14:10 ]

[disjfa]

En wat als je er een iframe neerzet? Denk je dat die anders reageert kwa positionering dan een layer(div)

[Verwijderd]

Rickets schreef op 18 februari 2004 @ 14:09:
Voor een oplossing zonder javascript kan je eens proberen deze layout aan te passen (als ik het goed begrepen heb).

Dat is duidelijk. Maar stel dat je 'menu' en 'main' van een scrollbalk wil voorzien, en dat je 'footer' altijd in beeld wil hebben. Dan heb je vervolgens weer het probleem waar ik mee zat. Hoe los je dat dan op?

[RM-rf]

CSS is geen scriptingtaal, ondaks dat met behaviour en xbl-binding koppelingen naar scripts te maken zijn.
alswel dat JSSS die functionaliteiten wel bood, echter volgens mij ook in netscape6 niet meer ondersteund wordt (was wel handig met incremental afhankelijke styles)

je kunt dus niet een verwijzing naar een javascript functie als waarde toepassen, dat zul je moeten doen als:

code:

<script type="text/javascript">
window.onload = new Function() {
   document.getElementById('C').style.height = docHeight ()-150
}</script>

overigens is het volgens mij ook met CSS te doen, als je een extra layer met height: 100% om B en C heenplaats, en vervolgens deze mbhv margin en padding op de juiste positie brengt

[ Voor 15% gewijzigd door RM-rf op 18-02-2004 14:17 ]

[Verwijderd]

disjfa schreef op 18 februari 2004 @ 14:10:
En wat als je er een iframe neerzet? Denk je dat die anders reageert kwa positionering dan een layer(div)

Nee, daar heb je gelijk in. Dat zou idd geen ruk uitmaken.

[Verwijderd]

RM-rf schreef op 18 februari 2004 @ 14:15:

(...)

overigens is het volgens mij ook met CSS te doen, als je een extra layer met height: 100% om B en C heenplaats, en vervolgens deze mbhv margin en padding op de juiste positie brengt

Maar het gebruik van layers levert weer andere problemen op, vooral met niet-IE browsers.

[disjfa]

Verwijderd schreef op 18 februari 2004 @ 14:25:
[...]
Maar het gebruik van layers levert weer andere problemen op, vooral met niet-IE browsers.

hehe, als IE nou een keer geen problemen met zich meebracht had je gewoon aan elke layer een bottom, top, left en right positie kunnen geven en dan zou dit soort problemen 0,0 moeite kosten.

omdat IE zonodig de samenwerking van de bottom/top en de left/right niet ondersteund krijg je hier een bak gezeur mee.

[Verwijderd]

RM-rf schreef op 18 februari 2004 @ 14:15:
(...)

code:

<script type="text/javascript">
window.onload = new Function() {
   document.getElementById('C').style.height = docHeight ()-150
}</script>

(...)

Dit lijkt het tot op zekere hoogte inderdaad te doen, maar IE geeft een parse error
"Expected ';' "

Ik heb het als volgt ingepast:

code:

<script type="text/javascript">
window.onload = new Function() {
   document.getElementById('zijbalk').style.height = docHeight ()-150;
   document.getElementById('zijbalk').style.width = 120;
   document.getElementById('mainframe').style.height = docHeight ()-150;
   document.getElementById('mainframe').style.width = docWidth ()-120;   
}</script>

De fout zit in line 2, character 32. Ik realiseer me dat dit misschien basic kennis is, maar ik weet gewoon te weinig van JS om hier het probleem in te zien.

[JoeKurr]

BtM909 schreef op 18 februari 2004 @ 14:05:
[...]

Dat gaat niet werken, vriendelijke vriend. Aangezien B (en ook C) relatief staan tov de body, krijg je 100% hoogte van de body mee

En of dat werkt

Ben zelf bezig met een web-applicatie voor het intranet hier, de layout wat ik nu heb ziet er zo uit:



Die witte en blauwe vlakken zijn iframes, de menubalken zijn gemaakt zoals ik hierboven heb uitgelegd.
Het einige verschil met de layout van J-rome is dat ik geen footer heb.
De hoogte van de layers B en C is namelijk 100% van de cel waar ze in staan, niet van de pagina (als je het goed doet )

[ Voor 26% gewijzigd door JoeKurr op 18-02-2004 14:38 ]

[JJvG]

Gelukkkig zijn hier al heel wat topics over geweest. Je moet voor je oplossing als volgt denken: Je hebt drie horizontale delen (die je met je CSS definieert) en het middelste deel splits je in twee verticale delen (ook met CSS). Je middelste, horizontale deel is een container van je twee verticale delen.

In dit topic staat het goed en staat een werkend voorbeeld waarin je alleen je verticale stukje nog bij hoeft te bouwen.

Suc6

[RM-rf]

Verwijderd schreef op 18 februari 2004 @ 14:35:
De fout zit in line 2, character 32. Ik realiseer me dat dit misschien basic kennis is, maar ik weet gewoon te weinig van JS om hier het probleem in te zien.

waarschijnlijk de spatie die tussen de functienaam en de haakjes staan:

code:

// geeft fout
document.getElementById('zijbalk').style.height = docHeight ()-150;
// gaat hopelijk goed
document.getElementById('zijbalk').style.height = docHeight()-150;

[ Voor 48% gewijzigd door RM-rf op 18-02-2004 14:41 ]

[Verwijderd]

Nee, die spatie lost het probleem niet op. Straks eens proberen om het geheel in CSS te zetten i.p.v. met tables. Ben benieuwd. Dat is inderdaad een interessante manier van denken.

[JoeKurr]

JJvG schreef op 18 februari 2004 @ 14:37:
Gelukkkig zijn hier al heel wat topics over geweest. Je moet voor je oplossing als volgt denken: Je hebt drie horizontale delen (die je met je CSS definieert) en het middelste deel splits je in twee verticale delen (ook met CSS). Je middelste, horizontale deel is een container van je twee verticale delen.

In dit topic staat het goed en staat een werkend voorbeeld waarin je alleen je verticale stukje nog bij hoeft te bouwen.

Suc6

Dat werkt dus niet in IE6.
Heb het ff geprobeerd, en de 'bottom' div ligt over 'left', 'right' en 'content' heen.

[BtM909]

JoeKurr schreef op 18 februari 2004 @ 14:53:
[...]


Dat werkt dus niet in IE6.
Heb het ff geprobeerd, en de 'bottom' div ligt over 'left', 'right' en 'content' heen.

Dit werkt toch gewoon

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

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

#container {
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  -moz-box-sizing: border-box;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

#content {
  position: relative;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

#contentLeft {
  width: 100px;
  float: left;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="contentLeft">test</div>
  <div id="content">
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>

[JoeKurr]

my bad

het ging hier net niet helemaal goed met die xml header.
Nu doetie 't wel idd.

[Verwijderd]

waar staat die -moz-box-sizing voor?

[BtM909]

Verwijderd schreef op 18 februari 2004 @ 19:35:
waar staat die -moz-box-sizing voor?

Verplicht leesvoer: [rml][ css] boxmodel gedonder en aanpakproblemen[/rml]

[Verwijderd]

BtM909 schreef op 18 februari 2004 @ 15:00:
[...]

Dit werkt toch gewoon

HTML:

(...)

Het werkt op zich prima (mooie methode!), maar er blijft een spacing staan tussen vak B en C. En dat kan ik wel verhelpen door vak C 3px naar links te schuiven, maar dan staat die spacing aan de rechterkant van vak C.

Iemand een idee waar dit aan kan liggen?

[Verwijderd]

Deze oplossing m.b.v. div's zou trouwens crossbrowser moeten zijn, maar opera verziekt de hele opmaak...