אנו כבר יודעים שאפשר להגדיר גודל באמצעות אחוזים.

אז אם נתון לנו ה- HTML הבא, אשר מכיל פסקה בתוך div:

<body>
   <h1>vh, vw</h1>
   <div id="enclosing-div">
      <p id="par1">
         Here is some text
         <br><br><br><br><br>
         <br><br><br><br><br>
         <br><br><br><br><br>
      </p>
   </div>
</body>

אפשר להגדיר ב- CSS את רוחב הפסקה באחוזים:

#par1 {
   background-color: pink;
   width: 75%;
}

ומתקבל:

 

 

ואנו באמת רואים שהפסקה תופסת 75% מרוחב הדף.

אחוזים ב- CSS הם ביחס לאלמנט ההורה

העניין הוא, שכאשר עובדים עם אחוזים אנו מגדירים את הרוחב ביחס לאלמנט ההורה. במקרה שלנו, האלמנט ההורה הוא ה- div. כברירת מחדל, רוחבו של ה- div ייקבע לפי רוחב התכולה שלו - שזו הפסקה. לכן רוחב ה- div שווה לרוחב הפסקה והפסקה תופסת 75% מרוחב הדף ומכסה את ה- div.

יכולנו, לעומת זאת, להגדיר מפורשות את רוחב ה- div:

#enclosing-div {
   background-color: aqua;
   width: 60%;
}

#par1 {
   background-color: pink;
   width: 75%;
}

כעת, ה- div יתפוס 60% מההורה שלו, ה- body (שזה פחות או יותר רוחב הדף), ואילו הפסקה תתפוס 75% מההורה שלה, שזה ה- div. במילים אחרות, הפסקה תתפוס 60%*75%=45% מהדף:

 

 

באופן דומה, יכולנו לקבוע גם את גובה ה- div וה- p:

body {
   height: 800px;
}

#enclosing-div {
   background-color: aqua;
   height: 60%;
}

#par1 {
   background-color: pink;
   height: 75%;
}

שימו לב שכדי לקבוע גובה באחוזים, חייבים להגדיר את הגובה של האלמנט ההורה, לכן הוספנו הגדרת לגובה של ה- body

מתקבל:

 

 

ואנו רואים שהפסקה תופסת 75% מהאלמנט ההורה שלה, ולא מהדף.

vh, vw הם ביחס ל- viewport

לפעמים נרצה להגדיר את הגודל של אלמנט ביחס לדף, ולא ביחס לאלמנט ההורה שלו. המינוח המדויק יהיה viewport.

Viewport הוא החלק בדף שרואים ברגע נתון. יש לו גובה ורוחב והוא משתנה כתלות במכשיר בו משתמשים - למשל מחשב או טלפון, וגם בעת שינוי גודל החלון. אם נקטין את החלון, ה- viewport יקטן.

כדי להגדיר גודל של אלמנט ביחס ל- viewport אפשר להשתמש ביחידות המידה vw, vh.

  • יחידה אחת של vw שווה לאחוז אחד מרוחב ה- viewport.
  • יחידה אחת של vh שווה לאחוז אחד מגובה ה- viewport.

אם נגדיר את רוחב הפסקה וגם את רוחב ה- div באמצעות vw במקום אחוזים:

#enclosing-div {
   background-color: aqua;
   width: 60vw;
}

#par1 {
   background-color: pink;
   width: 75vw;
}

נראה רק את הפסקה, כיוון שהיא מכסה את ה- div. הפסקה תופסת 75% מרוחב הדף וה- div תופס 60% בלבד.

 

 

באופן דומה, אם נגדיר את הגובה של הפסקה ושל ה- div באמצעות vh במקום באחוזים:

#enclosing-div {
   background-color: aqua;
   height: 60vh;
}

#par1 {
   background-color: pink;
   height: 75vh;
}

נראה רק את הפסקה, כיוון שהיא מכסה את ה- div. הפסקה תופסת 75% מגובה הדף וה- div תופס 60% בלבד.