Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Tabela na całą szerokość i wysokość okna z overflow
Forum PHP.pl > Forum > Przedszkole
!*!
Jak uzyskać taki efekt:



Chciałbym aby szerokość i wysokość tabeli była na całe okno przeglądarki, ale żeby np kolumny były z właściwością overflow auto, tak aby nie można było przesuwać tabelą, a jej zawartością np podczas zmiany rozmiarów okna przeglądarki.

http://jsfiddle.net/nMLCe/

Chodzi mi tylko o uzyskanie takiego efektu poprzez CSS i na div.
crocodillo
position:fixed (ew. absolute); top:0px; left:0px; bottom:0px; right:0px;
elementy wewnętrzne też należy wypozycjonować oraz overflow:scroll;
!*!
A bez position? Wersje z postion już mam, ale nie jest ona zbyt wydajna tzn. przy bardzo dużej ilości danych + efekty js spowalnia np przewijanie. Nie da się tego zrobić na "tabeli"?
potreb
Jeżeli korzystałeś z jakiegoś filemenedżera plików to zazwyczaj kolumny (wysokość + szerokość) dopasowują się do wielkości okna.
Ja używam do tego jquery. I wszystko działa bardzo dobrze:
  1. var windowSize;
  2. windowsSize = $(window).height();
  3.  
  4. $(function(){
  5. $('#foldernav').css({'height':(($(window).height())-64)+'px'});
  6. $('#filebrowser').css({'height':(($(window).height())-64)+'px'});
  7. $('#filebrowser').css({'width':(($(window).width())-242)+'px'});
  8.  
  9. $(window).resize(function(){
  10. $('#foldernav').css({'height':(($(window).height())-64)+'px'});
  11. $('#filebrowser').css({'height':(($(window).height())-64)+'px'});
  12. $('#filebrowser').css({'width':(($(window).width())-242)+'px'});
  13. });
  14. });
!*!
potreb - to musi działać natywnie w css.
potreb
No to masz problem, chciałbym zobaczyć rozwiązanie dobre dla wielu przeglądarek. Bo może sam bym to zastosował. Poszukaj w goole pod zapytaniami: liquid layout

Zawsze i tak jest problem dopasowaniem się do wysokości i włączeniem scrolla.
crocodillo
bez pozycjonowania da się tylko za pomocą js. samym css nie da się ustawić pionowo na całą stronę
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.