Als div hoger dan 336px wordt past de pagina niet meer binnen viewport.

Status
Niet open voor verdere reacties.

yammaski

Gebruiker
Lid geworden
9 mrt 2005
Berichten
284
Hi,

De pagina past mooi binnen een viewport van 1022px, dus zonder scrollbars. Maar wordt de div, hier purper, hoger dan 336px, past de pagina niet meer. Zie bijlage.
In deze div wil ik enkele afbeeldingen plaatsen : 2 rijen van 3 afbeeldingen met een tussenruimte van ± 20 px.

Ik heb me al suf gezocht en alles uitgeprobeerd, maar tevergeefs. Iemand die mij hiermee kan verder helpen ?

Link naar mijn pagina.


Alvast bedankt,
Groeten,
Yam.
 

Bijlagen

  • no-scrollbars.jpg
    no-scrollbars.jpg
    16,2 KB · Weergaven: 42
  • scrollbars.jpg
    scrollbars.jpg
    18,6 KB · Weergaven: 39
Je kan de grid van Bootstrap gebruiken. Werkt op smartphone, tablet, laptop, monitor en printer.
Code:
[B]HTML[/B]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid 3 kolommen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Dit is de linker kolom
    </div>
    <div class="col-sm-4">
      Dit is de middelste kolom
    </div>
    <div class="col-sm-4">
      Dit is de rechter kolom
    </div>
  </div>
</div>
</body>
</html>

[B]CSS[/B] (bestand style.css)

/* normalize root */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@-ms-viewport {
  width: device-width;
}
html {
  height: 100%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}
body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  line-height: 1.43;
  font-weight: 400;
  background-color: purple;
  color: white;
}

/* grid */

.container {
  /* optioneel: max. breedte van 3 kolommen bij elkaar (320px - 1170px) */
  /* max-width: 1024px; */
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 15px;
  /* optioneel: afwijkende achtergrondkleur voor kolommen */
  /* background-color: blue; */
}
@media (min-width:768px)  {
  .container {width:  750px;}
}
@media (min-width:992px)  {
  .container {width:  970px;}
}
@media (min-width:1200px) {
  .container {width: 1170px;}
}
.row {
  margin: 0 -15px;
}
.col-sm-4 {
  position: relative;
  min-height: 1px;
  padding: 0 15px;
  /* alleen voor test: border is omtrek van content */
  border: 1px solid yellow;
}
@media (min-width:768px) {
  .col-sm-4 {
    float: left;
    width: 33.333%;
  }
}

/* clear float's zodat volgende html onder container of row komt */

.container:after, .container:before, .row:after, .row:before {
  display:table;
  content:" "
}
.container:after, .row:after {
  clear:both
}

/* hieronder de rest van de css */

Alle browsers (behalve Internet Explorer) hebben, ale je niets doet, een vertikale scrollbar bij een te hoge tekst op de pagina. Dit is noodzakelijk voor touchscreens anders kunnen zij niet scrollen. Daarom is voor Internet Explorer de regel -ms-overflow-style opgenomen zodat de weergave op elke browser hetzelfde is.

De lange regel "font-family" is een fallback voor de beschikbare lettertypes op de diverse apparaten. Dit is gedaan om de weergave op elk apparaat zo goed als mogelijk hetzelfde eruit te laten zien.


Suc6, have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan