child div inherit height of parent div

[nat64x]

האם יש אפשרות לגרום לתת קונטינר להימתח לגבוהו של הקונטינר המכיל אותו.

קונטינר האב הגובה שלו מוגדר ע"י overflow hidden.

המטרה המבוקשת היא ליצור שני עמודות של SIDEBAR ו- CONTENT AREA שווי אורך.

כרגע זה נעשה ע"י ג'אווה סקריפט מעוניין בפתרון מבוסס CSS.

נא לא לחרוג יותר מידי מהפרמטרים של פיתרון הבעיה המבוקש.

[nir-z]

#parent{position:relative}
#child{height:100%}

[nat64x]

לא עובד עם overflow hidden

הגובה צריך להיות דינמי.

[nir-z]

צודק, לא שמתי לב.

הרגע נתקלתי בבעיה הזאת.

במקרה שלי לעמודה הקצרה יש pattern ברקע, אז העברתי את הרקע לקונטיינר ונוצרו עמודות שוות (רק ויזואלית).

אבל זה ממש לא פיתרון.

אם אתה בענייני CSS3 אז אפשר לא להשתמש בfloat אלא ב:http://www.css3.info/preview/multi-column-layout/

[Master Boo]

מה לגבי

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
{

[nat64x]

אם אתה בענייני CSS3 אז אפשר לא להשתמש בfloat אלא ב:http://www.css3.info/preview/multi-column-layout/

זה לא יפתור את בעית הגובה ופתרון עדיף יהיה להשתמש ב http://960.gs/

מה לגבי

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
{

הצעה מעניינת... אבל לא פותרת את הבעיה.

מספר בעיות שהיא מעלה:

1. אלמנטים שמוצבים מוחלט הגובה שלהם לא נכלל תחת אלמנט האב עם overflow hidden

2. אלמנטים שמוצבים מוחלט שהם רלטיב לאלמנט האב עם overflow hidden יוסתרו על ידו

3. עם נותנים לכל הילדים של האב את התכונות שציינת הגובה של כולם יאופס.

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

דבר נוסף שהייתי מעוניין בפתרונו:

אלמנט אב עם רוחב של 1000PX וסידבר עם רוחב 300PX FLOATED LEFT. אני מעוניין שקונטינר התוכן ימלא את השטח הנותר (דהיינו 700PX) מימינו של הסידבר, וזאת מבלי לציין את רוחבו במפורש ושהוא יכיל את עצמו (כלומר אסור לרוחב הקונטינר לחרוג מ-700PX גם אם זה קורה מאחורי הסיידבר).

אני מעוניין לעשות את LAYOUT גמיש יותר ככה שיהיה אפשר לשנות את ערך הרוחב בסידבר בלבד וקונטינר התוכן יתאים את עצמו למרחב הנותר.

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

[attachment deleted by admin]

[idofr]

תשמע, כל הרעיון של JS הוא הדינמיות, הCSS נטען שאתה מעלה את האתר ולא משתנה, הוא לא מודע למה קורה באתר.

בקיצור אתה תיהיה חייב להתרגל לJS

[nat64x]

הדברים ידועים. כבר ציינתי שאני משתמש ב JS אך אני מעוניין להפוך את הממשק ליותר resilient.

ברור לי שבכלל לא בטוח שזה אפשרי לביצוע באמצעות CSS בלבד, אבל מי יודע... יש ל CSS הרבה כוח.

[yonizaf]

למה אתה צריך overflow:hidden? הוא לא עוזר כלום לאובייקטים עם גובה לא קבוע.

ההצעה של position:absolute אמורה לעבוד אם התוכן של הsidebar הוא בגובה קבוע, אז פשוט אפשר לקבוע לקונטיינר min-height באופן מתאים.

לא הבנתי את הבעיות שהעלית. בדקת את זה, או שאתה מניח שיהיו בעיות?

תשמע, כל הרעיון של JS הוא הדינמיות, הCSS נטען שאתה מעלה את האתר ולא משתנה, הוא לא מודע למה קורה באתר.

בקיצור אתה תיהיה חייב להתרגל לJS

שטויות במיץ.

דבר ראשון, CSS יכול לשנות את תוכן האתר בצורה דינמית. שמעת על hover/active? ועל CSS transitions/animations?

דבר שני, הוא הוא לא ביקש לשנות את הדף בצורה אקטיבית, אלא שבטעינת הדף האלמנטים השונים יתאימו לתוכן.

[nat64x]

אני לא צריך overflow hidden הרעיון הוא לעשות שאמלנט האב יכיל את הילדים שלו ויקבל את הגובה של הילד הגובה יותר, ואז לגרום לילד לזהות את הגובה של האלמנט המכיל אותו ולמלות אותו ובכך להשוות את גובהו אל הסיידבר - שזאת המטרה.

כן בדקתי את position absolute. בלי קונטינר אב ו OVERFLOW HIDDEN האלמנטים פשוט ימתחו לכל גובה הדף.

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

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

[yonizaf]

למרבה הגיחוך והצער, מה שאתה רוצה מתאר בדיוק נמרץ את ההתנהגות של table, אלא שזה "לא מכבודנו" להשתמש בטבלאות בימינו אלה, כי זה לא מומלץ.

במקום זה, אתה יכול להוסיף לקונטיינרים של התוכן והצד display:table-cell, וזה יעבוד בדיוק כמו שאתה רוצה (בדפדפנים התומכים, כמובן).

אם ניקח את דף הדוגמה שהבאת פה כבסיס, הCSS שלו יראה ככה:

body{
  width: 1000px;
  margin: 0 auto;
}
#main{
  background-color: blue;
}
#sidebar{
  width: 300px;  
  background-color: yellow;
  display:table-cell;
}
#content{
  background-color: red;  
  display:table-cell;
}

[nat64x]

עשית זאת שנית, פתרון פשוט ואלגנטי ששומר על קוד עדכני .

זה גם נתמך היטב:

display:table-cell etc are all usable today across Firefox 2+, Safari 3+, Opera 9+ and IE8.

אני יאמץ את זה בפרויקטים שלי, מאוד שימושי. תודה רבה רבה .

[idofr]

לא יכול להגיד שחידשת לי אבל בהחלט פתחת לי אופציה שלא הייתי חושב עליה לפני. תודה