Forum PHP.pl > [HTML][CSS] Tabela w tabeli problem z height 100%

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Tabela w tabeli problem z height 100%

The Night Shadow

5.11.2008, 21:19:20

Witam,

W stylach height dla znacznika html i body jest ustawione na 100%.

Deklaracja kodowania wygląda tak:

[HTML] pobierz, plaintext 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
[HTML] pobierz, plaintext

Style wyglądają tak:

[HTML] pobierz, plaintext 
* {
   margin: 0px;
   padding: 0px;
 
   vertical-align: top;
   text-align: left;
 
   font-family: Arial;
   font-size: 11px;
}
 
html, body {   
   height: 100%;
}
[HTML] pobierz, plaintext

Jeżeli dam taki kod HTML:

[HTML] pobierz, plaintext 
<table style="height: 100%;">
      <tr>
         <td style="height: 196px;">
            TU JEST JAKAŚ TREŚĆ NA GÓRZE
         </td>
      </tr>
      <tr>
         <td style="height: 100%;">
            <table style="height: 100%;">
               <tr>
                  <td style="height: 100%; background-color: #cccccc;">
                     TU JEST 
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
[HTML] pobierz, plaintext

pojawia się problem z wyświetlaniem storny w IE 7 (IE 6 o dziwo jest dobrze) oraz w Operze. W FF jest w porządku.

Już tłumacze o co chodzi. Mamy tabelę, która dzieli stronę w pionie na dwie części górną i dolną. W dolnej części umieszczona jest tabela o powiedzmy szarym tle, która ma wypełnić całą dostępną przestrzeń.

Pierwsza tabela ma wysokość 100% wysokości ekranu.

Pierwszy wiersz pierwszej tabeli ma wysokość 196px. Wydawałoby się logicznym, że drugi wiersz powinien dobrać sobie wysokość automatycznie skoro nadane zostało 100% dla całej tabeli jednakże tak się niestety nie dzieje. Dopiero gdy nadam mu wysokość 100% faktycznie się rozszerza. Problem jednak polega na tym, że w IE 7 i Operze wysokośc tego drugiego wiersza nie jest maksynmalizowana względem wcześniejszego rozmiaru tabeli, ale odpowiada dokładnie 100% wysokości okna przeglądarki przez co ogólnie rzecz biorąc wychodzi o 196px w dół w wyniku czego pojawia sie pasek przewijania.

Jak zrobić tabelę z nagłówkiem w taki sposób, by ten drugi wiersz tabeli miał pozostałą część okna przeglądarki?

Z góry dzięki za odpowiedź

YaQzi

5.11.2008, 23:26:02

Ja bym proponował zastosować DIVy zamiast tabel do stawiania szkieletu strony. Łatwiej się je formatuje, przeglądarki wyświetlają je poprawnie no i kodu jest sporo mniej. A jeśli już tabela, to wewnątrz DIVa.

bregovic

5.11.2008, 23:26:24

[mega-ot]Tagujesz jako post CSS, i używasz tabeli do layoutu?

[/mega-ot]

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.