[CSS]height 100% met 8px border - Softwareontwikkeling

dinsdag 20 februari 2007 11:09

Acties:

CQB 241

Topicstarter

Stel je onderstaande html voor:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Homepage</title>
    <link rel="stylesheet" href="css/base.css" type="text/css">
        <!--[if IE]>
                <style type="text/css"> 
                    #container {
                        overflow: visible;
                    }
                </style>
        <![endif]-->    
        <!--[if lt IE 7]>
                <style type="text/css">
                    #container {
                        height: 100%;
                    }
                </style>
        <![endif]-->
</head>
<body>
<div id="container">
    <div id="contentbox">   
            <div id="content">
                <h1>Content</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                    Fusce quis justo ac purus gravida rhoncus. Class aptent taciti 
                    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
                    Donec justo. Duis vitae nunc eu justo rhoncus vulputate. 
                    Maecenas auctor sem vel arcu vehicula lobortis. 
                    Nullam nisl. Aenean egestas. Sed sodales pede vitae ante. 
                    Nullam felis sem, adipiscing et, bibendum et, commodo eleifend, magna.
                </p>
                <p>Meer <a href="default2.html">content</a> bekijken?</p>
            </div>
    </div>  
    <div class="clear"></div>
</div>
</body>
</html>

en de volgende css:

Cascading Stylesheet:

html, body {
    height:100%;
    
    padding:0;
}

body {
    margin:0;
    background:url(../img/mainbg.gif);
    background-repeat:repeat-x;
    background-color:#acacac;
}

#container {
    border:solid 8px white;
    min-height:100%;
}

#contentbox {
    width:860px;
    height:100%;
}

#content {
    height:100%;
    margin-left:170px;
    width:460px;
    float:left;
    background-image:url(../img/img_main.gif);
    background-repeat:no-repeat;    
    background-color:#d3d3d3;   
}
.clear{clear:both;display:block;}
/* in ieder geval voor IE nog de double margin eruit halen */

Dit is al zover mogelijk uitgekleed. Een werkende testcase is aanwezig.

Als je de testcase bekijkt, dan zie je 2 problemen:

1. De pagina met weinig content scrollt altijd. Zelf vermoed (understatement) ik dat dit door de border van 8px op de #container komt.
Ik heb hierbij getracht met negative margins etc. te werken, maar het resultaat bleef het zelfde. Het zou dus eigenlijk height:100% - 8px aan de onderkant (even uitgeschreven

).

2. De pagina met veel content heb ik inmiddels werkend in IE6 en IE7 (exclusief het eerste probleem), maar FireFox wil nog niet echt meewerken. De content-background rekt dan niet mee.
Edit: probleem 2 heb ik inmiddels bijna opgelost. Nu is het dus alleen nog dat bij weinig content de hoogte in IE7 en FireFox geen 100% meer is. Dat komt door de min-height denk ik.

Allebei de problemen heb ik getest met IE6, IE7 en FireFox 2.0.0.1.

[ Voor 6% gewijzigd door TeeDee op 20-02-2007 11:29 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 11:44

Acties:

The_Loeki

Maak een div aan die in CSS 100% wide is en daarbinnen een div met CSS-padding van 8px (en geen/auto width)

Dit is de enige manier die ik ken om dit fatsoenlijk te laten werken.

Het box-model van de W3C voorziet nl. niet in marges/paddings BINNEN de breedte. Ze worden er altijd aan toegevoegd.

Maar ik ben geen pro

[ Voor 5% gewijzigd door The_Loeki op 20-02-2007 11:44 ]

Nexus Breeze 500, Asus P5N32-E SLI Plus, Intel C2D E6600, Corsair TWIN2X2048-8500C5D Dominator, 2x320GB Seagate Barracuda 7200.10 SATA, 2xNexus Drive-A-Way, LiteOn LH-18A1P

dinsdag 20 februari 2007 11:48

Acties:

TeeDee

CQB 241

Topicstarter

Dat zou kunnen, maar dan mis je de witte border. En dat is dus blijkbaar een design "feature".

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 11:52

Acties:

The_Loeki

sorry, zit niet op te letten... Ik bedoelde ook een border van 8px

http://www.w3.org/TR/REC-CSS2/box.html

"width" en "height" bepalen de breedte van de content.

Overigens moeten voor alle parent elementen de height ook gedefinieerd zijn als je daarvoor %en wil gebruiken.

[ Voor 29% gewijzigd door The_Loeki op 20-02-2007 11:55 ]

Nexus Breeze 500, Asus P5N32-E SLI Plus, Intel C2D E6600, Corsair TWIN2X2048-8500C5D Dominator, 2x320GB Seagate Barracuda 7200.10 SATA, 2xNexus Drive-A-Way, LiteOn LH-18A1P

dinsdag 20 februari 2007 12:00

Acties:

TeeDee

CQB 241

Topicstarter

Ik zie daar geen verschil in. Als ik dus een #wrapper om #container zet met een border van 8px en een height van 100% dan blijft het resultaat hetzelfde.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 12:02

Acties:

BtM909

Watch out Guys...

En Faux columns is geen optie hier?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 20 februari 2007 12:07

Acties:

TeeDee

CQB 241

Topicstarter

BtM909 schreef op dinsdag 20 februari 2007 @ 12:02:
En Faux columns is geen optie hier?

Daar heb ik inderdaad aan gedacht, maar hoe wil je dat oplossen met de border? Technisch gezien is het een Faux column, het zijn wat gradients. Dat komt inderdaad niet helemaal naar boven in de test.

Edit: de testcase even bijgewerkt.

[ Voor 5% gewijzigd door TeeDee op 20-02-2007 12:14 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 12:08

Acties:

The_Loeki

TeeDee schreef op dinsdag 20 februari 2007 @ 12:00:
Ik zie daar geen verschil in. Als ik dus een #wrapper om #container zet met een border van 8px en een height van 100% dan blijft het resultaat hetzelfde.

Jawel.
De wrapper wordt 100% breed. De volledige container wordt automatisch zo breed tot de max van de wrapper. Op die manier wordt de container dus 100%-border breed.
Dit zou bijv. moeten functioneren:

CSS:
#wrapper{
width:100%;
height:100%;
}

#container{
border:solid 8px white;
}

HTML:
<div id="wrapper">
<div id="container">
</div></div>

Nexus Breeze 500, Asus P5N32-E SLI Plus, Intel C2D E6600, Corsair TWIN2X2048-8500C5D Dominator, 2x320GB Seagate Barracuda 7200.10 SATA, 2xNexus Drive-A-Way, LiteOn LH-18A1P

dinsdag 20 februari 2007 12:16

Acties:

TeeDee

CQB 241

Topicstarter

The_Loeki schreef op dinsdag 20 februari 2007 @ 12:08:
[...]

Jawel.
De wrapper wordt 100% breed. De volledige container wordt automatisch zo breed tot de max van de wrapper. Op die manier wordt de container dus 100%-border breed.
Dit zou bijv. moeten functioneren:

Dat werkt in zoverre: #container krijgt nu geen height van 100%. Dat kan je alleen door min-height te doen, en dan krijg je dus weer de 100%+8px hoogte.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 12:32

Acties:

Verwijderd

Er zijn drie mogelijkheden die ik zie:
• Voeg geen doctype toe, dan is de pagina in border-box model. Nadeel: je pagina valideert niet.
• Gebruik scripting om je element te sizen
• Forceer border-box modus met CSS en een comment:

HTML:

<!-- Comment triggers quirksmode in IE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Homepage</title>
    <style type="text/css">    
        body, html {
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        
        * {
            /* Force border-box model for non-IE */
            -moz-box-sizing:border-box;
            box-sizing:border-box;
        }
        
        #content {
            width:100%;
            height:100%;
            border:8px solid red;
            padding:8px;
        }
    </style>
</head>
<body>
    <div id="content">
        <h1>Content</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Fusce quis justo ac purus gravida rhoncus. Class aptent taciti 
            sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
            Donec justo. Duis vitae nunc eu justo rhoncus vulputate. 
            Maecenas auctor sem vel arcu vehicula lobortis. 
            Nullam nisl. Aenean egestas. Sed sodales pede vitae ante. 
            Nullam felis sem, adipiscing et, bibendum et, commodo eleifend, magna.
        </p>
        <p>Meer <a href="default2.html">content</a> bekijken?</p>
    </div>
</body>
</html>

dinsdag 20 februari 2007 14:36

Acties:

The_Loeki

Hmmmm...

Zou ik toch veel liever kiezen voor een standards-compliant model met behulp van een table.

Tegenwoordig wordt dat niet meer gezien als best practice, maar 't werkt iig wel:

CSS:
html, body, #wrapper {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#wrapper {
background-color: #ccccff;
border: solid 8px white;
width: 100%;
}

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" />
<link href="/css/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<table id="wrapper"><tr><td>Hallo</td></tr></table>

</body>
</html>

Valideert prima en functioneert vlgs mij ook goed, al zal je waarschijnlijk moeten oppassen met dingen als position: in de divs.

Nexus Breeze 500, Asus P5N32-E SLI Plus, Intel C2D E6600, Corsair TWIN2X2048-8500C5D Dominator, 2x320GB Seagate Barracuda 7200.10 SATA, 2xNexus Drive-A-Way, LiteOn LH-18A1P

dinsdag 20 februari 2007 15:17

Acties:

TeeDee

CQB 241

Topicstarter

Dat zou heel goed kunnen, alleen als je naar de testcase kijkt, dan zie je dat de #contentbox ook een background-image heeft, welke standaard een height van 100% moet hebben. Ik zal eens kijken of ik het e.e.a. in een table layout kan gieten.

Verwijderd schreef op dinsdag 20 februari 2007 @ 15:28:
[...]

Zo valideert het wel correct:
HTML:
1
2
3
4
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
Let er wel op dat dat alleen voor XHTML is.

Volgens mij zet je de pagina dan ook gewoon in quirksmode.

[ Voor 48% gewijzigd door TeeDee op 20-02-2007 15:31 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 15:28

Acties:

Verwijderd

Als je tegenwoordig een HTML 5 pagina aanmaakt zolang je aan X HTML houdt geen DOCTYPE meer vereist.

[ Voor 86% gewijzigd door Verwijderd op 30-08-2016 15:29 . Reden: Stackexchange: = DOCTYPE needed for HTML5 ]

dinsdag 20 februari 2007 15:37

Acties:

The_Loeki

TeeDee schreef op dinsdag 20 februari 2007 @ 15:17:
Dat zou heel goed kunnen, alleen als je naar de testcase kijkt, dan zie je dat de #contentbox ook een background-image heeft, welke standaard een height van 100% moet hebben. Ik zal eens kijken of ik het e.e.a. in een table layout kan gieten.

Misschien zou je ook een div met fixed positioning er achter kunnen zetten en daar de background in laden?

Nexus Breeze 500, Asus P5N32-E SLI Plus, Intel C2D E6600, Corsair TWIN2X2048-8500C5D Dominator, 2x320GB Seagate Barracuda 7200.10 SATA, 2xNexus Drive-A-Way, LiteOn LH-18A1P

dinsdag 20 februari 2007 16:28

Acties:

TeeDee

CQB 241

Topicstarter

Okay, ik heb nu de testcase wederom geupdate.

Het enige wat nu _niet_ werkt is: De pagina met veel content in FireFox. Deze loopt nog steeds buiten de box.

The_Loeki schreef op dinsdag 20 februari 2007 @ 15:37:
[...]
Misschien zou je ook een div met fixed positioning er achter kunnen zetten en daar de background in laden?

Dan hou je toch nog steeds dat deze geen height van 100% mee krijgt? En al kreeg deze een height van 100%, dan rekt de #container niet mee, dus krijg je de border midden op je pagina te zien.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 20 februari 2007 21:04

Acties:

cyberstalker

Eersteklas beunhaas

Het zou toch heel simpel moeten kunnen. Je geeft de body een witte achtergrondkleur en een padding van 8px. Dit zorgt voor de witte border.

Vervolgens geef je je container de juiste achtergrond, een hoogte van 100% en een overflow: auto en je bent klaar

.

Ik ontken het bestaan van IE.

woensdag 21 februari 2007 09:50

Acties:

TeeDee

CQB 241

Topicstarter

Dan zou je inderdaad met een hele simpele opzet vrij rap klaar zijn (je zit dan nog wel met je boxmodels), maar dit heb ik eerlijk gezegd als eerste geprobeerd.

Een groot probleem is onder andere ook de background op #content. Als ik nu alleen het probleem in FireFox in de testcase kan oplossen dan vind ik het voor deze site gescheten.

Ik krijg de indruk dat het "simpel" met een 'clear:both;' ergens opgelost kan zijn. Alleen heb ik deze al op meerdere plekken geplaatst, maar geen resultaat.

Alright, ik heb de testcase wederom geupdate. Deze werkt nu met FireFox 2.0, IE6 en IE7. Ik heb er een ranzige(?) workaround voor FireFox ingezet en het ontwerp ziet er nu beter uit.

Toch maar even gauw Opera gedownload, en de workaround werkt daar nog niet (omdat er een check op document.all is).

Voorlopig vind ik het e.e.a acceptabel. Mocht iemand een oplossing weten, dan weet je me te vinden.

[ Voor 33% gewijzigd door een moderator op 22-02-2007 14:11 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 22 februari 2007 11:19

Acties:

TeeDee

CQB 241

Topicstarter

Goed. Heb er nog een nachtje over geslapen en het zit me toch niet lekker.
Zoals de testcase staat (het ontwerp) ziet het er perfect uit, alleen zou ik het crossbrowser willen hebben en als het kan zonder javascript work-arounds.

Mocht iemand nog een tip/trick/ingeving hebben, houd ik me aanbevolen.

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 22 februari 2007 11:43

Acties:

BtM909

Watch out Guys...

.

[ Voor 100% gewijzigd door BtM909 op 22-02-2007 14:12 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 22 februari 2007 13:38

Acties:

Clay

cookie erbij?

Met wat margin/padding truuken kom je toch een heel end imo;

Cascading Stylesheet:

html {
    padding:10px;
    margin:0;
    height:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
    *+html { height:auto; }

body {
    height:100%;
    margin:-10px 0;
    padding:0;
}

#canvas {
    width:700px;
    background:#f0f0f0;
    margin:0 auto;
    height:auto !important;
    height:100%;
    min-height:100%;
    border:solid #c0c0c0;
    border-width:10px 0;
}

Kale testcase met 10px borders. Getest in ie6, 7, ff en opera, inc tekst overflow buiten de viewport.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 22 februari 2007 14:03

Acties:

TeeDee

CQB 241

Topicstarter

Oe, dat is wel netjes inderdaad.

Ik heb de testcase wederom aangepast. De enige die nu 'goed' omgaat met te weinig text is IE6. Het e.e.a. ziet er weer glad uit qua code. Nu nog er achter zien te komen hoe de #content/#contentbox een (min-)height krijgt bij te weinig content.

Edit: voor de volledigheid staan ie6 en ie7 nu in quirks. IE6 werkte al goed zonder quirks, alleen 7 weer niet.

Nu nog de "min-height" (tenminste, denk dat het daaraan ligt) werkend krijgen in Opera en FireFox.

Edit2: In safari gaat er gok ik wat fout met het boxmodel, want de bottom aan de onderzijde wordt bij de height:100% opgeteld, maar dat neem ik voor lief.

[ Voor 35% gewijzigd door TeeDee op 22-02-2007 14:31 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 26 februari 2007 09:50

Acties:

TeeDee

CQB 241

Topicstarter

Ben nog een paar keer bezig geweest, maar echt fantastisch gaat het niet.
De testcase is nu de laatste versie wat ik heb.

Deze heb ik nu getest in IE6, IE7, Opera en FireFox. IE6 en IE7 renderen op de manier zoals het zou moeten zijn. FF en Opera doen dit niet.

Zou ik dan toch richting een JS oplossing moeten gaan?

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 26 februari 2007 11:23

Acties:

Fuzzillogic

Cool

Misschien dat je met CSS2 hier verder komt. position: absolute; top: 8px; left: 8px; bottom: 8px; right: 8px; op je wrapper, icm wat geklooi met 100% height op body en html. Binnen de wrapper kun je dan wellicht weer met min-height: 100% gaan werken.

IE6 snapt daar natuurlijk de ballen van, maar je kunt dat hier fixen met het Dean Edwards' IE7-script.

Om IE6 in quirksmode te gooien kan, maar het levert je weer gezeik op met andere onderdelen. Overigens heb je in moderne browsers de mogelijkheid om met CSS3 het box-model aan te passen, naar bijv. border-box. Kan handig zijn.

maandag 26 februari 2007 14:19

Acties:

TeeDee

CQB 241

Topicstarter

Fuzzillogic schreef op maandag 26 februari 2007 @ 11:23:
Misschien dat je met CSS2 hier verder komt. position: absolute; top: 8px; left: 8px; bottom: 8px; right: 8px; op je wrapper, icm wat geklooi met 100% height op body en html. Binnen de wrapper kun je dan wellicht weer met min-height: 100% gaan werken.

En dat is dus juist het issue op dit moment: geklooi met 100% height e.d. Maar ik zal het e.e.a. is met een andere insteek gaan proberen.

Overigens heb je in moderne browsers de mogelijkheid om met CSS3 het box-model aan te passen, naar bijv. border-box. Kan handig zijn.

De box-models waren al aangepast naar border-box.

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 1 maart 2007 09:54

Acties:

TeeDee

CQB 241

Topicstarter

Goed, even resumerend:

- De testcase, gebaseerd op de CSS van Clay werkt aardig, behalve dus (min-)height:100% issues in FF, Opera
- De testcase, gebruik makend van Javascript pakt wel een hele hoop aan, maar bij bijvoorbeeld Safari is het een drama.

Het liefst zou ik graag de methode van Clay gebruiken, alleen krijg ik het maar niet voor elkaar om de height goed te krijgen bij te weinig content.

De JS manier daarentegen werkt gewoon goed. Eventueel zou ik er nog Safari in kunnen hakken.

Tevens heb ik nog geprobeerd om top,right,bottom,left op 8px absoluut te zetten, maar het probleem blijft: de height.

Edit
Welnu, het bleek achteraf dat de CSS van Clay prima werkte, ware het niet dat ik nog ergens een verdwaalde float:left op de #content had staan.

De bijgewerkte en laatste testcase is hier te vinden.

Getest in FireFox 2, IE6, IE7, Opera 9.1 en Safari (Safari heeft denk ik wat moeite met een margin/padding her en der, maar daar kan ik mee leven.)

[ Voor 22% gewijzigd door TeeDee op 08-03-2007 09:40 ]

Heart..pumps blood.Has nothing to do with emotion! Bored