logo
  Div vak resize
  Dit geld niet voor Internet Explorer, want die doet het niet!

Als je een div tekst vak maakt, dan kan de bezoeker hem groter en kleiner maken.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 
IN DE CSS
div.resize {
width: 100px;
height: 100px;
border: 1px solid;
resize: both;
overflow: auto;

 
TUSSEN DE BODY TAGS
<div class="resize1">tekst</div>

  Leuk, maar niet even handig en je website gaat er nou ook niet echt mooier worden met dat gedonder!
Gelukkig is daar wat aan te doen en dat kan op verschillende manieren.

Het vak hieronder kan je alleen horizontaal 'uitrekken'

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

div.resize {
width: 100px;
height: 100px;
border: 1px solid;
resize: horizontal;
overflow: auto;
}

Je kan hem ook alleen verticaal 'uitrekken' dan verander je gewoon 'horizontal' in 'vertical'

Wil je dat ze zowel horizontaal als verticaal niet kunnen 'uitrekken' dan maak je gewoon de resize regel zo:
resize: horizontal vertical;
En dan ben je overal van af

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Als je mensen toch laat spelen, dan kan je ze ook tot een bepaalde grootte laten 'uitrekken' zoals hieronder

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hiervoor zet je dit bij de css:
max-height:150px;
min-height:100px;
max-width:300px;
min-width:100px;

Hou er wel rekening mee dat de tekst wel in het vakje past

 
eind