10-06-2011, 12:55
|
|
|
|
חבר מתאריך: 25.08.03
הודעות: 9,114
|
|
אני מוסיף מספר נתונים לדיוק:
הקישור הראשון שצירפת מכיל מידע מענין, אך אולי לא מדוייק (אני כותב "אולי", כיון שיתכן והוא מזכיר מה שאני עומד לכתוב ולא שמתי לב לכך).
1. אלמנט יכול להיות בעל גובה 100%, אך ורק אם גובה אלמנט האב הוגדר באופן שרירותי ולא באחוזים. (חשוב להגדיר גובה ממש, לא גבוה-מינימלי או גובה-מקסימלי).
2. רק את גובה שני האלמנטים העליונים -html & body- יחד, ניתן להגדיר באחוזים.
כל זה כשלא משנים את המאפיין position לקבוע או מוחלט.
אם משנים את המאפיין position למוחלט או קבוע, זה משפיע על אלמנט שגובהו הוגדר באחוזים, גם אם גובה אלמנט האב שלו לא הוגדר באחוזים. הוא כנראה יורש את הגובה מאלמנט אב בדרגה גבוהה יותר, אשר הוגדר לו גובה שרירותי.
הבדיקות נעשו ב-FF4 בלבד.
הקוד שמובא להלן אינו כולל התייחסות למאפיין position.
הקוד מכיל קוד css מינימלי, ורק קוד שמשפיע בצורה זו או אחרת על הוכחת הטענות.
קוד:
<!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" lang="en" />
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
}
* html #container {
height: 100%;
}
#a {
background-color: #567;
height: 150px;
}
#b {
margin-left: 20px;
background-color: #89a;
height: 90%;
}
</style>
</head>
<body>
<div id="container">
<h1>100% Height Demo</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
<div id="a">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
<div id="b">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque.</p>
</div>
</div>
</body>
</html>
נערך לאחרונה ע"י ישראל K בתאריך 10-06-2011 בשעה 13:00.
|
ראשי
צ'אט
מצב כלאיים
