css schermvullend met verschillende div's

Status
Niet open voor verdere reacties.
J

janbe63

Gebruiker
Lid geworden
21 okt 2007
Berichten
64
Ik heb de opbouw volgens de volgende div-jes

HTML: 
<body>
   <div id="pagina">
   <div id="box1">box 1</div>
   <div id="box2">box 2</div>
   <div id="box3">box 3</div>
   <div id="box4">box 4</div>
   </div>
  </body>

de bijbehorende css is nu:

HTML: 
div#pagina{
  height: 100%;
  }
div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box4{
background-color: yellow;
width: 100%;
height: 50px;
}

div#box2{
background-color: red;
float: left;
width: 20%;
height: 90%;
}

div#box3{
background-color: green;
float: left;
width: 80%;
height: 90%;
}

graag wil ik graag dat het geheel schermvullend is. De div box1 en box4 zijn de header en footer. Box2 en box3 wisselen van inhoud, als het niet past wil ik graag dat er langs deze box(en) een scrollbar komt. Wat moet ik aanpassen aan de css?
Hoop dat het duidelijk is.

Jan
 
Hoi Jan,

Hiervoor kan je de CSS property overflow(-(x/y)) gebruiken. Als je deze op auto zet zal het gestyleerde element automatisch scrollen als er meer content in komt dan de box groot is.

P.S. Wellicht wil je een clear:both gebruiken bij je footer (box4), omdat deze nu achter box2 en box3 zit.

Dit werkt:
HTML: 
<style type="text/css">
div#pagina{
	height: 100%;
}
div#box1{
	background-color: black;
	width: 100%;
	height: 75px;
}

div#box2{
	background-color: red;
	float: left;
	width: 20%;
	height: 90%;
	overflow-y:auto;
}

div#box3{
	background-color: green;
	float: left;
	width: 80%;
	height: 90%;
	overflow-y:auto;
}

div#box4{
	background-color: yellow;
	width: 100%;
	height: 50px;
	clear: both;
}
</style>

<body>
	<div id="pagina">
		<div id="box1">box 1</div>
		<div id="box2">box 2</div>
		<div id="box3">box 3</div>
		<div id="box4">box 4</div>
	</div>
</body>

Misschien is dit wat je wilt bereiken:
HTML: 
<style type="text/css">
body{
	margin: 0;
}

div#pagina{
	height: 100%;
}
div#box1{
	background-color: black;
	width: 100%;
	height: 75px;
}

div#box2{
	background-color: red;
	float: left;
	width: 20%;
	overflow-y:auto;
	top:75px;
	bottom:50px;
	position: absolute;
}

div#box3{
	background-color: green;
	float: left;
	width: 80%;
	overflow-y:auto;
	top:75px;
	bottom:50px;
	left:20%;
	position: absolute;
}

div#box4{
	background-color: yellow;
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
}
</style>

<body>
	<div id="pagina">
		<div id="box1">box 1</div>
		<div id="box2">box 2</div>
		<div id="box3">box 3</div>
		<div id="box4">box 4</div>
	</div>
</body>
 
Laatst bewerkt:
ik heb nu dit in de css staan

HTML: 
div#pagina{
  height: 100%;
  
  }
div#box1{
background-color: black;
width: 100%;
height: 75px;
}

div#box4{
background-color: yellow;
width: 100%;
height: 50px;
bottom: 0;
position: absolute;

}

div#box2{
background-color: red;
float: left;
width: 20%;
overflow-y:auto;
top:75px;
bottom:50px;
position: absolute;



}

div#box3{
background-color: green;
float: left;
width: 80%;
overflow-y:auto;
top:75px;
bottom:50px;
left:20%;
position: absolute;
height:100%;


}]

gevolg is dat ik een scrollbalk geheel links krijg van de gehele pagina. De banner en footer op zijn plaats (maar die schuiven de de scroll mee uiteraard) en de box2 en box3 lopen geheel door.

zie http://www.petrabe.nl/test2/
 
Hoi janbe63,

Wat niet hierboven staat, maar wel op je testpagina, is het begin van de html-code; met:
HTML: 
<! doctype html>
<html>
... enz.
De spatie tussen het uitroepteken en het woord "doctype" hoort er niet in. Daardoor weten de browsers in feite niet dat het standaard html moet zijn wat er volgt, en gaan ze maar wat doen (bv. Firefox heel anders dan Internet Explorer).

Verder is het raadzaam er in een <meta> de karakterset bij te zetten ("utf-8" is universeel), d.w.z. hoe de lettertekens van de code geïnterpreteerd moeten worden. In je editor moet de pagina dan ook als utf-8 opgeslagen worden.
Bij een <link> verwijzing hoort ook te staan wat voor soort spul er in die <link> zit: type="text/css".
Daarmee kan het begin worden:
HTML: 
<!doctype html>
<html lang="nl">
<head>
	<meta charset="utf-8">
	<title>test :: schermvullend</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
... enz.
De "lang" (language) is de taal van de inhoud van de pagina, o.a. belangrijk voor voorleesbrowsers en voor Google.

=======

In de css zit een afwijking van het tweede voorbeeld van CaptainBri: de div#box3 {...} heeft een height:100% gekregen. Dat zijn tegenstrijdige berichten: top moet op 75px van boven liggen, dan komt 100% hoogte, en dan moet de onderkant 50px boven de onderkant van de pagina liggen. Samen: 100%+125px, dwz. er komt rechts een scrollbar om bij de laatste 125px te kunnen komen.
De div#box2 heeft dat niet, en daarom komt (bij een geldig !doctype) het groen van box3 precies 75px onder de 50px hoogte van de gele footer uitsteken (achter het geel zit ook groen, maar dat zie je niet omdat de footer in een hogere laag zit).
Als de 100% hoogte er uit gaat, komt alles goed: dan is de top-afstand en de bottom-afstand gegeven, en wat er tussen zit wordt automatisch door de browser ingevuld.

=======

Er kan nog meer uit! :)
In de css staat div#box1, div#box2, enz.
Nu is een id een uniek ding, dat maar één keer op een pagina gebruikt mag worden. Of die id verbonden is aan een <div>, een <h1>, een <p> of noem maar op, dat maakt niets uit: met #box1 {...} enz. weet de css genoeg.

Ook staat er een container <div id="pagina"> in, die als enige functie heeft om de totale pagina-breedte op 100% te zetten.
Maar de <body> heeft als default-waarde uit zichzelf al 100% breedte. Dan worden alle <div>'s die er in zitten óók 100% breed, want <div>'s hebben een block-karakter = gaan over de volle beschikbare breedte van het element waar ze in zitten.
  • Behalve als een <div> een eigen breedte opgekregen heeft, zoals #box2 en #box3 dat hebben; of als een <div> een absolute positie heeft zoals #box4 (dan wordt de <div> zo breed als z'n inhoud, voor zover de 100% niet gehaald wordt). De #box4 krijgt dus wel een breedte van 100% mee.

O ja, de #box2 en #box3 hebben een {float: left}, maar ook een {position: absolute}. Maar bij een absolute positie mag/kan er niet gefloat worden, want alles zit vastgeprikt. De {float: left} kan er dus uit.
=======

Samengevat:
HTML: 
<!doctype html>
<html lang="nl">

<head>
	<meta charset="utf-8">
	<title>test :: schermvullend</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>

<body>
	<div id="box1">box 1</div>
	<div id="box2">box 2</div>
	<div id="box3">box 3</div>
	<div id="box4">box 4</div>
</body>

</html>
Met als css:
Code: 
body{
    margin: 0;
    height: 100%;
}
 
#box1 {
    height: 75px;
    background-color: black;
}
 
#box2 {
    position: absolute;
    width: 20%;
    top:75px;
    bottom:50px;
    background-color: red;
    overflow-y:auto;
}
 
#box3 {
    position: absolute;
    width: 80%;
    top:75px;
    bottom:50px;
    left:20%;
    background-color: green;
    overflow-y:auto;
}
 
#box4 {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: yellow;
}

  • Hiermee komt dan deze testpagina tevoorschijn: schermvullend.htm
  • Er zit ook wat dummy-tekst in.
  • Bij een minder hoog scherm/window krijgt de #box 3 automatisch ook een eigen scrollbar.

Met vriendelijke groet,
CSShunter
__________
PS.
Aan zo'n breedte-opvullende opmaak zijn ook nadelen verbonden:
  • Bij lage resoluties / smalle windows kan de linkerkolom erg smal worden; kan gevaarlijk zijn als er afbeeldingen met een vaste breedte in komen.
  • Bij hoge resoluties / brede windows kan de rechterkolom erg breed worden, zodat de tekst moeilijk te lezen is.

zetbreedte-1920x1080.png


Links bij een beeldscherm van 1920*1080px, rechts bij een scherm op 1024*768px.​


  • Bij een breedbeeld (hier op vrijwel ware grootte) komt de tekst in de rechterkolom (bij normale lettergrootte, dus niet kleiner!) al gauw uit op 2,5 à 3 keer de maximale zetbreedte die voor goed leesbare regels geldt.

Bij een fixed width opmaak heb je daar geen last van; de pagina kan horizontaal gecentreerd worden, terwijl de overschot-ruimte links en rechts bij bredere schermen met iets moois opgevuld kan worden.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan