1. Dom
  2. Pytanie i odpowiedź
  3. Pełna wysokość i pełna szerokość układ CSS

Pełna wysokość i pełna szerokość układ CSS

2010-09-06 16 views
12

szukam sposobu, aby stworzyć CSS-only (bez JavaScript) układ z 5 regionów, które wygląda następująco:Pełna wysokość i pełna szerokość układ CSS

┌────────────────────┐ 
    │   H   │ 
    ├────┬────────┬──────┤ 
    │ │  │  │ 
    │ │  │  │ 
    │ │  │  │ 
    │ A │ B │ C │ 
    │ │  │  │ 
    │ │  │  │ 
    │ │  │  │ 
    ├────┴────────┴──────┤ 
    │   F   │ 
    └────────────────────┘

(Powyższy schemat będą wyświetlane poprawnie tylko jeśli twoja czcionka ma znaki Unicode w postaci znaków kreskowych.)

Układ musi całkowicie wypełnić dostępne miejsce w przeglądarce (zarówno wysokość, jak i szerokość). A, B, C musi mieć taką samą wysokość; a H ​​i F muszą mieć tę samą szerokość. Oznacza to, że pomiędzy regionami nie może być żadnych luk, z wyjątkiem ustalonego marginesu. Elementy wewnątrz regionu powinny znać wielkość rodziców; Oznacza to, że umieszczenie wewnątrz obszaru obszaru rozszerzeń będzie obejmowało całą szerokość i wysokość regionu. Po prawej stronie okna przeglądarki nie będzie paska przewijania (ponieważ wysokości H, C i F dokładnie sumują się do wysokości obszaru roboczego przeglądarki).

Jest to bardzo łatwe do zrobienia, jeśli do wykonania układu używasz modelu <table>. Ale wciąż czytam, że używanie tabel do formatowania jest złe, a CSS jest drogą do zrobienia.

Mam świadomość, że istnieją grupy robocze W3C, które pracują nad rozszerzeniem standardu CSS o funkcje, które sprawiają, że powyższy układ jest bardzo łatwy do wdrożenia. Te standardowe rozszerzenia nie są obecnie implementowane przez większość przeglądarek; i potrzebuję rozwiązania, które działa z obecnymi przeglądarkami.

Przeglądałem wiele stron internetowych zawierających przykładowe układy CSS, ale żaden z nich nie może zrobić tego, co opisałem powyżej. Większość tych układów nie ma pełnej wysokości lub kolumny mają inną wysokość lub wymagają JavaScript.

W związku z tym moje pytanie brzmi: czy możliwe jest stworzenie powyższego układu przy użyciu tylko CSS (bez JavaScript, bez kolumn faux, no <table>)? Oczywiście rozwiązanie powinno działać z aktualnymi przeglądarkami internetowymi.

EDIT: W oparciu o rozwiązania dostarczone przez Gilsham, udało mi się napisać przykładową stronę, która generuje żądany układ CSS-only (testowane z Firefox 3.5.5 i IE8):

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html,body{ 
    height:100%;  
    margin:0; 
    padding:0; 
    border:0; 
} 

div{ 
    margin:0; 
    border:0; 
} 

textarea { 
    margin:0; 
    border:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 

.content{ 
    display:table; 
    width:100%; 
    border-collapse:separate; 
    height:80%; 
} 

.Col{ 
    display:table-cell; 
    width:30%; 
    height:100%; 
} 

#header,#footer{ 
    height:10%; 
    position:relative; 
    z-index:1; 
} 

</style> 
</head> 
<body> 
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div> 
<div class="content"> 
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div> 
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div> 
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div> 
</div> 
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div> 
</body> 
</html>

One wadą jest to, że elementy div muszą być określone w określonej kolejności, co jest złe dla optymalizacji pod kątem wyszukiwarek i dla czytników ekranu; to jednak nie jest ważne dla zamierzonej aplikacji internetowej.

/Frank

Źródło

2010-09-06 Anonymous

+0

Jest powód, dlaczego nie można znajdź literaturę, jak to zrobić - ponieważ nie ma żadnego praktycznego celu! Przydatny jest płyn do * albo * wysokości lub szerokości. Płyn ** za ** jest po prostu głupi. Na pewno widziałeś dyskusję na temat rozmiarów ekranu i ich wpływu na projektowanie i tworzenie stron internetowych. Nawet gdyby było to technicznie możliwe, stworzenie projektu, który do tego pasuje, będzie prawie niemożliwe. Kuszące jest wskazywanie na takie rzeczy, ponieważ wciąż potrzebujemy tabel do układu, (i sposobu, w jaki pytanie jest sformułowane, prawdopodobnie jest), ale nie jest - nie z czymś, co jest niepraktyczne. –

+0

Ten rodzaj układu można znaleźć wszędzie w świecie aplikacji komputerowych: wystarczy spojrzeć na program Outlook, Visual Studio, Eclipse i inne. Aplikacje internetowe, takie jak Outlook Web Access, również mają ten układ (oczywiście z "

"). Dlatego myślę, że ** jest ** praktycznym celem. –

+0

@fmunkert Aplikacje internetowe używają Javascript - W rzeczywistości nikt nie pracuje w tak ograniczonych warunkach. –

Odpowiedz

2

Powodem nie można znaleźć żadnego CSS zrobić to dlatego, że specyfikacja CSS naprawdę nie pozwalają spełnić wszystkie te warunki bez użycia co najmniej jedną z opcji, które don” t chcesz użyć.

The Holy Grail płynny układ jest 100% CSS, lecz nie spełnia kryteria wysokość na własną rękę: http://www.alistapart.com/articles/holygrail/

Można fałszywe kryteria wysokość z stopce za pomocą tej metody: http://www.themaninblue.com/writing/perspective/2005/08/29/

ten Artykuł 24Ways ma pełnowymiarową metodę kolumnową z wykorzystaniem pozycjonowania bezwzględnego, która rozwiązuje kilka problemów, ale tworzy nową, ponieważ jedna z twoich kolumn zawsze będzie przepełniana, jeśli zawartość się rozwinie: http://24ways.org/2008/absolute-columns

Prawdopodobnie będziesz potrzebować o połączyć wiele metod, aby uzyskać coś, co można wykorzystać w specyfikacji. Osobiście po prostu używałbym jquery, ponieważ życie jest zbyt krótkie, aby poradzić sobie z takimi plikami CSS, ale jeśli nie chcesz nic zrobić, to przygotuj się na hakowanie.

Źródło

2010-09-06 15:36:25 hollsk

0

Nie ma łatwego sposobu, aby element wypełniający daną głębokość dokładnie przy użyciu pomiarów procentowych.

Możesz zbliżyć się do anchoring the footer u dołu okna, a następnie - jeśli cols A i C mają wspólny kolor tła, ale tło col B różni się, ustaw kolor twojego ciała (lub kontenera div, jeśli jest obecny) tak, aby pasował do cols A + C bezproblemowo wypełnić luki poniżej tych kolumn, jeśli są krótsze niż col B.

Źródło

2010-09-06 15:37:50

6

Hi fmunkert (i innych tutaj :),

byłem po prostu ciekawy i myśl chcą go wypróbować, więc podpaliłem mój notatnik i wymyśliłem coś takiego:

<html> 
    <head></head> 
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;"> 
<div style="height: 100%; width: 100%;"> 

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div> 

<div style="height:60%; width: 100%; display: table;"> 
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div> 
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div> 
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div> 
</div> 

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div> 

</div> 
</body> 
</html>

i tu jest wyjście Firefox:

Firefox Screenshot

i wyjście w IE8:

IE8 screenshot

Przetestowałem to za pomocą Firefox 3 i IE8. Wydaje mi się ok. Czy tego właśnie chciałeś? :)

Uwaga 1: Jak wspomniano przez innych, może to nie być praktyczne, ale nadal zależy to od tego, czego oczekujesz od swoich klientów. Uwaga 2: Jeśli naprawdę tego chcesz, możesz edytować wartości wysokości i szerokości zgodnie z potrzebami, a reguły CSS należy umieścić w osobnym pliku CSS, a nie w stylach wstawianych jako najlepszą praktykę.

Źródło

2010-09-06 16:31:06 Gan

+0

Działa doskonale w Firefoksie 3.5.5, ale nie mogłem jej uruchomić w Internet Explorerze 8. Wypróbowałem kilka DOCTYPE (none, html, loose i strict), ale albo wysokość jest zbyt mała, albo sekcja C jest źle umieszczona. –

+0

To dziwne. Przesłałem zrzut ekranu IE8 i jak widać, działa on tak samo jak w Firefoksie. Czy masz inne pliki CSS, które mogą być przyczyną problemu? Spróbuj użyć narzędzia programisty IE (Skrót - F12), aby to odkryć. – Gan

Powiązane problemy

 Powiązane problemy