div met margin fullscreen

**klimmer** · 9 juni 2012, 22:36

Ik zou graag een div willen maken die aan alle kanten een margin heeft. (dus rondom een witte rand)

Ik krijg dit nu voor elkaar alleen de onderkant is niet goed want de witte rand zie je pas als je naar beneden scrolt. (rechter plaatje)

voorbeeld.JPG

Hoe kan ik er voor zorgen dat de bottom margin in het scherm blijft met weinig tekst? zoals het plaatje links boven.
ik denk dat het komt doordat ik de min-height van de div ook op 100% zet. maar anders is hij niet pagina vullend.
Dit is mijn css nu:

Code:

html,body,li,ul,img,form,h1,h2,h3,h4,h5,h6,hr{
margin:0px;
padding:0px;
}

html,body,#content{
min-height:100%;
height:100%;
}

#content {
background: #B8B8B8;
margin:20px;
}

verder zit alles in elkaar (<body><div>hier de hele pagina</div></body)
Alvast bedankt

**Flamedog** · 10 juni 2012, 18:19

hmm probeer dit eens, lijkt een heel eind te werken bij mij. Andere oplossing zou zijn om de div een vaste hoogte en breedte te geven

HTML 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
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test</title>
        <style type="text/css">
            html, body, p, h1 {
                margin: 0;
                padding: 0;
            }
            body {
                height: 100%;
                width: 100%;
            }
            #content {
                margin: 2.5%;
                position: absolute;
                background-color: #ffbb00;
                width: 95%;
                height: 85%;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <p>Tekst tekst tekst</p>
        </div>
    </body>
</html>

mvg,
Flame

**klimmer** · 10 juni 2012, 19:09

Bedankt!
nu is in ieder geval die scrollbar weg.
Maaaar de 2,5% margin is 2,5% van de width. hierdoor zijn de top&bottom margin anders dan die left&right. Is hier wat aan te doen? want dan is de website geschikt voor elke resolutie.

**klimmer** · 10 juni 2012, 22:13

ik heb hier iets gevonden waarvan ik dacht dat het werkte(1ste voorbeeld):
http://stackoverflow.com/questions/4...padding-margin

Maar met weinig tekst werkt dit ook goed. Maar als er te veel tekst in komt dan staat dat buiten de gekleurde background. Dit is natuurlijk te verhelpen met overflow:auto; Maar dan krijg je een scroll balk in de div.

**csshunter** · 13 juni 2012, 00:13

Hoi klimmer,
Inderdaad, bij het stackoverflow-voorbeeld krijg je dan een binnenwerkse scrollbar.

Test: stretchedToMargin.htm

In het flamedog-voorbeeld is er niets aan te doen dat de kaderranden links/rechts en onder/boven verschillen: het zijn % van de beschikbare schermbreedte en beschikbare schermhoogte. Die zijn niet in een vaste verhouding: hangt af van de resolutie van de kijker, en/of de window-afmetingen van zijn/haar browser.
De % vervangen door een vast aantal px is geen optie: je weet tevoren de beschikbare schermhoogte niet in pixels, en dan kan je daarvan niet de randjes aftrekken om de hoogte van de #content op te geven.

Eventueel zou je er javascript op los kunnen laten: dat de werkelijke maten laten opmeten, en op grond daarvan de css laten invullen. Maar dat is wat gedoe, en zonder javascript werkt het niet.

Wat wel zou kunnen om een overal even groot rondom-kader te maken, is om bovenin en onderin een gefixeerde <div> aan te leggen met de hoogte van de kaderrand. De content kan daar dan onderdoor gescrolld worden:

HTML Code:

1
2
3
4
5
6
7
8
9
10
<body>
<div id="topkader"></div>
 
<div id="content">
    ....
</div>
 
<div id="bottomkader"></div>
 
</body>

Met als css:

Code:

html { 
	height: 100%;
	padding-bottom: 1px; /* zie: http://bliksekaters.nl/tests/de-springende-pagina-1a.htm */
	}
body {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: #ffbb00;
	border-left: 30px solid white;
	border-right: 30px solid white;
	}
#topkader, #bottomkader {
	position: fixed;
	left: 0;
	height: 30px;
	width: 100%;
	background: white;
	}
#topkader { top: 0; }
#bottomkader { bottom: 0; }
#content {
	padding: 40px 0; /* vrije ruimte boven en beneden om hele content te kunnen zien */
	}

De vrije ruimte maakt dat de content bovenin en onderop niet verscholen blijft onder de kaderrand (dus minimaal de hoogte.daarvan).
Links en rechts worden de randen als borders van de <body> geschilderd, en boven en beneden als background van de <div>-stroken die eroverheen staan gemonteerd.

Test met korte pagina: kader-rondom-a.htm
Test met lange pagina: kader-rondom-b.htm

- Het risico van zo'n vaste onderrand vind ik altijd wel, dat een snelle of oppervlakkige bezoeker denkt dat daar de pagina ophoudt (met name als onderop toevallig een witregel zit; vanwege de wisselende hoogte van bezoekers niet te voorspellen!). Dan wordt de scollbar rechts niet gecheckt, en dus een stuk van de pagina gemist.
- Het lastige van een vaste links-rechts rand is, dat er enorme verschillen in layout kunnen ontstaan tussen kleine resoluties resp. smalle schermen en brede schermen. Vaak is het alleen maar mooi op één bepaalde resolutie. Of je moet de content horizontaal centreren en een max-width geven, dan kan de werkzame breedte (= regellengte) niet overmatig worden.

Met vriendelijke groet,
CSShunter

**klimmer** · 13 juni 2012, 09:20

Bedankt!

Onderwerp: div met margin fullscreen

Onderwerp opties

Zoek in onderwerp

Vraag is niet opgelost

div met margin fullscreen

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact