[CSS] Jak rozciągnąć div'a zawsze do końca strony niezależni


(1q2w3e4r) #1

Witam,

Jak rozciągnąć div’a do końca strony niezależnie od ilości tekstu?

Poniżej załączam screena przedstawiającego problem:

05011186814594654477.png


(stream) #2

Spróbuj

height: 100%;

(1q2w3e4r) #3

Próbowałem, niestety nie pomaga.

#content {

	width: 1005px;

	height: 100%;

	background: url(images/20.jpg) repeat-y;

	float:left;

}

(Spectatorx) #4

Spróbuj ustawić:

height: auto;

Wtedy może wystąpić błąd, że przy braku tekstu nie będziesz mieć wogóle widocznego tego diva, wtedy możesz też ustawić minimalną wysokość diva poprzez:

min-height: wartość;


(1q2w3e4r) #5

Niestety nic to nie dało. Cały czas jest tak samo.

Macie jakieś inne pomysły?


#6
#content {

position: absolute; 

top: 0; 

left: 0;

bottom: 0; 

right: 0; 

width: auto; 

height: auto; 

background-color: #000;

}

u mnie coś takiego zadziałało oczywiście musisz zmienić kolor :slight_smile:


(1q2w3e4r) #7

(manieKMP) #8

Zawsze możesz wyklepać coś w tym stylu (ogólnie):

-dla css

html, body {height:100%;}

body {margin:0;

/* i reszta z body */}

/* Tu ogół tego co podałeś */

#all {min-height:100%;

background: #ffffff;

/* i reszta z div'a "all" */}

-w sekcji body, div “content” powinien teoretycznie kończyć się

lub ekwiwalentem tego.

Poza tym możesz z tego swojego kodu coś pousuwać (z pewnością minimalną wysokość ustawioną na auto, bo może ten float w head’zie jest/będzie do czegoś Tobie potrzebny).

PS. Z tego co pamiętam, powyższe działa jedynie na główny div (w tym wypadku #all), więc nie ma co się bawić w próbę rozciągania “dzieci” w ten sposób (one rosną w miarę jedzenia ;)), chyba że zamiennie na nich pozycjonowanie absolutne sprawdzisz (jeśli chcesz im własne tła dawać).


(Wszechstronny) #9

Zdaje się, że diva jako takiego nie da się rozciągnąć metodami konwencjonalnymi na 100%.

Jest to specyfika div, gdzieś już czytałem na ten temat.

Zasadniczo jeśli chcesz by div był na stałej wysokości czyli od góry do dołu to są dwa wyjścia.

Jedno to jquery, a drugie, jeśli chcesz by określony kolor czy też grafika był z góry do dołu, musisz zrobić pewien trick, czyli dla diva w którym znajduje się div z tekstem, ustawić go tak by się pokrywał z położeniem diva z tekstem, wrzuć biały plik png, lub gif jako tło, o szerokości diva z tekstem, i wysokości powiedzmy 10px z powtarzalnością w osi y.

Wówczas pozwoli Ci to uzyskać taki efekt, jakby div był na całą wysokość okna, bo tak naprawdę zakładam, że chodzi Ci o uzyskanie białego tła na całej wysokości okna. Innej metody ominięcia tego problemu nie widzę, żadne height:100% nie zadziała.