Toon posts:

[CSS] Hoogte 100% min 50px

Pagina: 1
Acties:

zaterdag 17 september 2005 20:27

Acties:
  • Twilight Burn
  • Registratie: Juni 2000
  • Laatst online: 29-04 11:55

Twilight Burn

Topicstarter
Is het mogelijk om met CSS een hoogte te krijgen van 100% min 50 pixels?

Ik probeer het volgende voor elkaar te krijgen:
Afbeeldingslocatie: http://members.chello.nl/m.janssen36/layout.png

Het blauwe gedeelte is de titelbalk, het rode gedeelte is het menu wat links staat, en het groene deel is het deel wat overblijft omdat de site een vaste breedte heeft.

Waar ik problemen mee heb is het gele deel, waar de content in komt te staan. Ik wil graag dat de titelbalk altijd bovenaan blijft, en dat alleen de content gescrolled kan worden, als deze niet binnen het venster past.

Ik heb het geprobeerd met een stel geneste div's en dan met padding/margin proberen de binnenste goed te krijgen, alleen in alle gevallen blijft de binnenste een hoogte van het browservenster houden, maar dan 50 pixels naar beneden geschoven, dat is dus niet wat ik wil.

Ik weet dat je in IE gebruik kunt maken van een "expression" oid zodat je inderdaad "browservenster - 50px" als hoogte op kunt geven, maar dat werkt weer niet in Firefox.

Ik ben dus op zoek naar een oplossing in pure CSS/HTML, die werkt in zowel IE als Firefox. Met javascript of (nog gruwelijker) frames krijg ik het wel voor elkaar, maar ik heb het liefst zonder.

zaterdag 17 september 2005 20:51

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 19:26

Zoefff

❤ 

Volgens mij:

container_1, height:100%; {
    groen, height:100%; float:right;
    container_2, height:100%; {
        blauw, height:50px;
        rood, width:25px; height:100%; margin-top:50px; float:left;
        geel, height:100%, margin-top:50px;
    }
}

Zoiets :P


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zaterdag 17 september 2005 21:13

Acties:
  • Twilight Burn
  • Registratie: Juni 2000
  • Laatst online: 29-04 11:55

Twilight Burn

Topicstarter
Ik heb net de volgende HTML code geprobeerd:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>
            Test
        </title>
    </head>
    <body style="background-color: green;">
        <div id="container_1" style="position: absolute; top: 0px; left: 0px; height: 100%;">
            <div id="container_2" style="position: absolute; top: 0px; left: 0px; height: 100%;">
                <div id="blauw" style="background-color: blue; position: absolute; top: 0px; left: 0px; height: 50px; width: 780px;">blauw</div>
                <div id="rood" style="background-color: red; position: absolute; top: 0px; left: 0px; width: 125px; height: 100%;  margin-top:50px; overflow: auto;">rood</div>
                <div id="geel" style="background-color: yellow; position: absolute; top: 0px; left: 125px; width: 655px; height: 100%;  margin-top:50px; overflow: auto;">
                    g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />
                    g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />
                </div>
            </div>
        </div>
    </body>
</html>

Maar dat helpt nog steeds niet, het gele vak (en ook rode) het heeft nog steeds de hoogte van het venster.

Het groene vak is trouwens niet belangrijk, dat wordt niet gebruikt.

zaterdag 17 september 2005 22:45

Acties:

Verwijderd

Heldere en duidelijke uitleg, TS! Een pure/De eenvoudigste oplossing gaat je vooralsnog niet lukken door gebrekkige ondersteuning voor 'bottom: 0;' in Internet Explorer, maar deze ondersteunt weer wel expressies. Derhalve zou ik het als volgt doen.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>
      Test
    </title>
  </head>

  <body>
    <div id="container1">HEADER</div>
    <div id="container2">NAVIGATION</div>
    <div id="container3">
g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />
g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />g<br />
    </div>
  </body>
</html>


Met de volgende stylesheet.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

body {
  background-color: green;
}

#container1 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 50px;
  background-color: blue;
}

#container2 {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 125px;
  bottom: 0px;
  _height: expression(document.documentElement.offsetHeight - 50 + 'px');
  background-color: red;
}

#container3 {
  position: absolute;
  top: 50px;
  left: 125px;
  width: 655px;
  bottom: 0px;
  _height: expression(document.documentElement.offsetHeight - 50 + 'px');
  overflow: auto;
  background-color: yellow;
}


edit:

Dank voor je artikel, Menno! Had helaas nog geen tijd genomen om eerder je website eens door te lezen, want anders had ik je methode eerder geweten *oeps!*.

[ Voor 26% gewijzigd door Verwijderd op 18-09-2005 02:04 ]

zaterdag 17 september 2005 23:16

Acties:
  • Twilight Burn
  • Registratie: Juni 2000
  • Laatst online: 29-04 11:55

Twilight Burn

Topicstarter
Dat werkt idd, en ik vind het zo wel een goede en aanvaardbare oplossing, bedankt!
Alleen in IE was het gebruik van "- 50" toch een paar pixels te weinig (nog steeds een verticale scrollbar op de hele pagina) maar dit was simpel op te lossen door er "- 54" van te maken.

zaterdag 17 september 2005 23:38

Acties:

Verwijderd

Het kan wél, door slim gebruik te maken van borders. Ik heb er in mei een een kort stukje over geschreven. Wat jij wil kan met de 2e methode die ik beschrijf. Kijk maar even of je eruit komt. Dit is een voorbeeld van een layout die vergelijkbaar is met wat jij wil.

zondag 18 september 2005 02:08

Acties:

Verwijderd

Bij verschillende oplossingen zie ik Layout Mode-switching door bijv. een (terechte) XML-declaratie op te nemen in het geval van een XHTML-doctype. Mijn vraag: in hoeverre vinden jullie dit -gezien de verschillen tussen layout modes- lastig of verwerpelijk in een uitwerking?

zondag 18 september 2005 02:27

Acties:
  • disjfa
  • Registratie: April 2001
  • Laatst online: 08-01 11:17

disjfa

be

Je kan toch met de huidige IE gewoon faux columns gebruiken?

disjfa - disj·fa (meneer)
disjfa.nl

zondag 18 september 2005 03:20

Acties:

Verwijderd

Helemaal gelijk met faux columns, Disja!
Ik ging even mee in de gedachten van "panels".
Fijn dat iemand nog even wakker is 8)
Pagina: 1
Reageer