div met margin fullscreen

Status
Niet open voor verdere reacties.
K

klimmer

Gebruiker
Lid geworden
17 nov 2008
Berichten
135
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
 
Laatst bewerkt:
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: 
<!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
 
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.
 
Hoi klimmer,
Inderdaad, bij het stackoverflow-voorbeeld krijg je dan een binnenwerkse scrollbar.

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: 
<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.



- 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
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan