Witam,

Wymyśliłem sobie narysowanie box'u 100px od góry okna przeglądarki w dół
do samej krawędzi. Chyba, że zawartość będzie wyższa, to ten box ma
dostosować się oczywiście.

Cyba nie da się tego wprost zrobić więc trzeba skorzystać z
zagnieżdżenia 2 elementów:

<div class="outer">
<div class="inner"></div>
</div>

Chciałbym aby .outer był wysokości 100% okna przeglądarki i zawierał
padding 100px od góry. Wewnętrzny .inner ma wypełniać dostępną
przestrzeń (czyli od 100px w dół).

Nie wiadomo dlaczego zawsze z tym były problemy. Wysokość 100% zawsze
stanowiła tabu ograniczając poprawne wyświetlanie elementów wyłącznie do
tabel. Zauważyłem, że pod Chrome i IE już to ogarnięto i można
posługiwać się blokami o wysokości 100% (łamiąc standard?) ale pod FF to
nadal nie działa. Czy jest jakiś sposób bez angażowania JS, aby to
zadziałało? Czy .inner musi być display:table aby pod FF zadziałało
height:100% ?

Nie czepiałbym się tabeli gdyby nie fakt, że stwarza ona poważne
ograniczenie - nie da się w/g standardu użyć position:relative.

--
Pozdrawiam
Marek

do góry

W dniu 2013-12-21 14:02, Marek pisze:
> Witam,
>
> Wymyśliłem sobie narysowanie box'u 100px od góry okna przeglądarki w dół
> do samej krawędzi. Chyba, że zawartość będzie wyższa, to ten box ma
> dostosować się oczywiście.

position:absolute;
top:100px;
bottom:0;

> Cyba nie da się tego wprost zrobić więc trzeba skorzystać z
> zagnieżdżenia 2 elementów:
>
> <div class="outer">
> <div class="inner"></div>
> </div>
>
> Chciałbym aby .outer był wysokości 100% okna przeglądarki i zawierał
> padding 100px od góry. Wewnętrzny .inner ma wypełniać dostępną
> przestrzeń (czyli od 100px w dół).
>
> Nie wiadomo dlaczego zawsze z tym były problemy. Wysokość 100% zawsze
> stanowiła tabu ograniczając poprawne wyświetlanie elementów wyłącznie do
> tabel.

https://developer.mozilla.org/en-US/docs/Web/CSS/box
-sizing


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry

W dniu 2013-12-23 13:08, Paweł Piskorz pisze:
>
> position:absolute;
> top:100px;
> bottom:0;

Czy jest dozwolone używanie obu ustawień jednocześnie? Kiedyś był z tym
problem.

>
> https://developer.mozilla.org/en-US/docs/Web/CSS/box
-sizing
>
>

Fakt! Jest to rozwiązanie. Dzięki :-)

--
Pozdrawiam
Marek

do góry

W dniu 2013-12-26 21:34, Marek pisze:
> W dniu 2013-12-23 13:08, Paweł Piskorz pisze:
>>
>> position:absolute;
>> top:100px;
>> bottom:0;
>
> Czy jest dozwolone używanie obu ustawień jednocześnie?

Tak.

> Kiedyś był z tym problem.

O ile nie wspierasz jakiś staroci, to nie powinieneś mieć problemu.

>> https://developer.mozilla.org/en-US/docs/Web/CSS/box
-sizing
>>
>
> Fakt! Jest to rozwiązanie. Dzięki :-)

:)


--
Pozdrawiam,
Paweł "PablO" Piskorz

do góry