קביעת גובה לדיב ע"פ גובה העמוד

[imb]

ברצוני לקבוע לסיידבר שיתאים את גובהו ע"פ גובה העמוד.

איזו הגדרה עלי לתת ב CSS?

תודה.

 

[אריה123]

אני חושבת שאין כזאת אפשרות.
האפשרות היחידה להגדיר גובה של דיב היא בפיקסלים.

 

[imb]

תודה,
ובכל אופן, אשמח לשמוע מישהו שחולק על דעתך...

 

[אריה123]

גם אני אשמח.
זה יהיה שימושי גם בשבילי...

 

[נפוליאון]

div {
position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

או להגדיר את אלמנט הזה וכל ההורים שלו עם height: 100%

 

[imb]

הגדרתי את ההגדרה הנ"ל והיא גרמה לדיב לצוף מעל כל האלמנטים בדף, הגובה לא השתנה כלל.
גם כשהגדרתי גובה של 100% לכל הדיוים, לא השתנה הגובה.

 

[Shia]

כמובן שזה לא עבד. (הקוד שנפוליאון הציע) זה ממש לא נכון.

צריך להסביר קודם כל מה הבעיה: למה דיב שנותנים לו גובה 100%, לא ממלא את גובה ההורה שלו?
ובכן, אם גובהו של האלמנט ההורה, הוא תוצאה של התוכן שנמצא בתוכו, או במילים אחרות, לא נקבע לו גובה בצורה מפורשת, אזי לא ניתן לקבוע לאלמנט שבתוכו, גובה 100% - כי הדפדפן לא יודע לפרש את זה למידות - 100% ממה?..

לעומת זאת, אם האלמנט ההורה הוא בעל גובה מפורש, אזי גם האלמנט בפנימי, יכול לקבל ערך של 100% גובה.
לדוגמה: http://jsfiddle.net/7shubpx6/

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

 

[אריה123]

אצלי זה עבד...
מה הכוונה "לצוף"-שזה מכסה את כל האלמנטים האחרים בדף?

 

[imb]

תודה רבה על ההסבר המפורט.
אני באמת לא מעוניינת לתת גובה מוחלט לדיב ההורה.

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

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

 

[אסף טובי]

בס"ד
אפשר ב javascript

 

[אסף טובי]

בס"ד
אם תגדיר את ה body ב 100% אז תוכל להגדיר את הדיב ב 100% ותגיע לתוצאה הרצויה
כמובן הדיב צריך להיות צאצא שלה body

 

[mat]

תעשו כמו שנפולאיון הציע.
ותעשו את האב.
position: relative;

זה יעשה את ה absolute באופן יחסי לאב.

 

[Shlomi]

אולי זה יועיל?

http://css-tricks.com/fluid-width-equal-height-columns/

 

[imb]

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

האם תוכלו לתת הגדרות מדוייקות, לאיזה דיבים בדיוק לתת את ההגדרות?

הלינק לאתר הספציפי נמצא כמה בהודעה מס' 9.

תודה

 

[אריה123]

אולי זה יעזור לך?
יצירת-אתר-מותאם-לכל-גודל-המסך-במספר-שניות

 

[imb]

תוכלי בבקשה להעתיק לי את תוכן העמוד? האתר חסום לי.

תודה

 

[אריה123]

בקובץ המצורף.

 

[Nahum]

תלמדו javascript (בפרט jquery), זה יעשה לכם חיים קלים...

זה הקוד:

var pageHeight = $(document).height();
    $('.demo').css('height',pageHeight);

להחליף את demo בשם של הדיב שלכם (אם זה ID לשנות את ה. ל#), וזה הכל.

דוגמה לקוד המלא:
http://jsfiddle.net/dnmf9dnt/

 

[אריה123]

לא הבנתי, זה javascript או php?
חוץ מזה, ברור שאפשר לעשות את זה ב-jquery אבל אני חושבת שמה שאפשר עדיף לעשות ב-css.

 

[Nahum]

זה javascript, פשוט העורך של פרוג מאפשר או HTML או PHP ...

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

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