Chciałbym zmusić znacznik html do maksymalnego rozciągnięcia oraz umiejętności zwiększania swojej wysokości wraz z odpowiednią ilością tekstu.
Do Opery 8.00 było to mozliwe przy użyciu
min-height: 100%;
które jednak przestało już działać.
Gdy z kolei użyję height: 100% będę miał problem podczas zbyt dużej ilości tekstu (tekst wypłynie, wysokość html pozostanie stała).
Czy jest jakaś uniwersalna metoda na poradzenie sobie z tym? 
Podaj kod. Bo tak na sucho do nie ma sensu deliberować.
Docelowo chciałbym, aby niebieski div miał wysokość równą przynajmniej wysokości body (czyli z możliwością zwiększenia, jeżeli tekstu będzie za wiele, lub wysokość okna przeglądarki będzie zamała).
http://osiolki.net/test
Nie mogę oczywiście nadać
height: 100%;
dla niebieskiego div'a, bo treść wyjdzie poza niego w wyżej przedstawionych warunkach.
Mam nadzieję, że nie dostnę od osiołków ;-)
No height:100% wydaje się tu naturalny. Można się zabezpieczyć przed wyjściem poza za pomocą box-sizing:border-box.Nie mogę oczywiście nadać
height: 100%;
Ten test Opera oczywiście wyświetla jak najbardziej prawidłowo (i Firefox też).
Zauważ co mówi standard na temat procentów w min-height:
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').
Ponieważ blokiem obejmującym blok #test jest body, a dla body nie masz ustawionego height, to min-height jest traktowany jak 0, a nie 100%. Ustaw dla body height:100% i zobacz jaki będzie efekt
Wiem o tym, ale w moim przpadku każdy element ma ustaloną jakąs wysokość.quiris napisał(a)
Zauważ co mówi standard na temat procentów w min-height:
Efekt będzie częściowo satysfakcjonujący... aż do momentu gdy treści się nagromadzi na tyle dużo, by się nie zmieścić w tym body. Wtedy wypłynie poza niego.quiris napisał(a)
Ponieważ blokiem obejmującym blok #test jest body, a dla body nie masz ustawionego height, to min-height jest traktowany jak 0, a nie 100%. Ustaw dla body height:100% i zobacz jaki będzie efekt
Zresztą ustaw sobie taką wysokość okienka ze stroną, aby część tekstu się nie mieściła, otwórz źródło, ustaw height: 100% dla body i odśwież widok (z cache). Zobaczysz, że border-bottom będzie widoczny w połowie treści. Tutaj to nie problem, ale gdybym miał w nim jakieś tło, to by mi się w pewnym momencie urywało :|
No jak ma, jak nie maWiem o tym, ale w moim przpadku każdy element ma ustaloną jakąs wysokość.
body { width: 200px; border: 1px solid green; min-height: 100%;}
Ok... a istnieje ostatecznie jakiś sposób, na zrobienie trzech elementów - każdy z własnym tłem i każde na całą wysokośc strony? Bo dwa mogę - powiedzmy: html i body, ale co gdy potrzebuję więcej? Zanim się doczekam CSS3 to jeszcze troche wody w Wiśle upłynie :-)quiris napisał(a)
No jak ma, jak nie ma