Tabelle bis zum Fensterende erweitern (Höhe)

naums · Beitrag von **naums** » Mi Feb 16, 2011 1:01 pm

problem: Mit dem FF oder Chromium klappts, aber der IE und Opera haben probleme. Die stretchen die Höhe der Seite nicht auf 100%.

bbbl · Beitrag von **bbbl** » Mi Feb 16, 2011 4:10 pm

naums hat geschrieben:wende mal bitte den Standard Loose an. Folgendes über die Datei:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Ich verrate dir jetzt mal beiläufig ein Geheimnis, dem Browser ist es vollkommen egal ob du einen Loose/Strict oder NaumsUltraDuperSuperScheißAufIE-Doctype verwendest. Der einzige Zweck des Doctype's für den Browser ist es, um zu entscheiden ob er die Seite im Standardsmode oder Quirksmode rendert – welcher von beiden angestrebt werden sollte is hoffentlich offensichtlich. Um dies zu erreichen, reicht aber tatsächlich diese Form:

Code: Alles auswählen

<!DOCTYPE html>

Das oben ist übrigens auch der für HTML5-Dokumente vorgesehene Doctype und funktioniert auch perfekt in allen gängigen Browsern – zudem leicht zu merken. Es ist natürlich deine Entscheidung, ich kanns aber nur empfehlen..

Dann ist mir noch das fehlende Meta-Charset aufgefallen. Da es optional ist, kann man es natürlich weglassen.. dies gilt aber nur, wenn der Server so konfiguriert ist, dass er das Dokument mit dem passendem Charset ausliefert – was aber der Erfahrung nach in den seltesten Fällen so voreingestellt ist. Auch hier kann man folgende HTML5 Notation verwenden:

Code: Alles auswählen

<meta charset="utf-8">

Von der Position her, sollte es immer soweit wie möglich oben im Dokument stehen, am besten vor dem <title> – bei FF muss es sogar genau in den ersten 2048 bytes des Dokuments stehen..

Und dann noch mal Hinweis darauf/oder die Bitte (Glaube ich zumindest schon im einem anderen Thread von dir gelesen zu haben), die Tags alle klein zu schreiben – es ist zwar prinzipiell erlaubt, aber einfach nicht die gängige Konvention.. zumal du es auch nicht konsistent durchziehst.

Aber genug Vorgeplänkel, zum eigentlichen Problem.

Warum du hier unbedingt eine Tabelle verwenden willst ist mir schleierhaft, vor allem da sich ja ganz klar um das Layout der Seite dreht – zu mal der IE6 auch durchaus Bugs hat was Tabellen angeht. Ich würde dir ganz klar raten das mit Div-Elementen anzugehen.

Das 100% Problem. Die Angabe 100% bezieht sich immer auf die Höhe des übergeordneten Elements. Du musst also erstmal dem übergeordneten Element eine Höhe zuweisen, damit der Browser auch weiss, worauf sich die 100% des Kindelements bezieht. Im Fall deiner Tabelle ist das Body-Element das übergeordnete Element, demnach musst du diesem eine Höhe zuweisen. Das hilft aber noch nicht in allen Browsern, du musst auch noch dem Html-Element eine Höhe von 100% zuweisen, erst dann bezieht sich die Höhe von 100% des Kindelements auf die Höhe des Viewports.

Für das Kindelement solltest du dennoch die Angabe min-height verwenden, wenn dein Content doch mal mehr Platz einnimmt kann sich das Div entsprechend anpassen. Der IE6 kann kein aber kein min-height?! Das stimmt, aber was du vielleicht nicht weisst ist, dass sich height in der Tat im IE6 wie min-height verhält! Was schlicht ein Implementierungsfehler ist! Jetzt musst du nur noch schauen, das height vor den modernen Browsern versteckst, und nur dem IE6 zuweist. Da gibt es ne Interessante Technik, die sieht aber vielleicht etwas freaky aus:

Code: Alles auswählen

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="de" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="de" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="de" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="de" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="de" class="no-js"> <!--<![endif]-->

Das stammt aus der HTML5 BOILERPLATE und macht folgendes: Es nutzt Conditional-Comments um dem Html-Element jeweils eine entsprechende Klasse zuzuweisen, je nach dem um welche IE-Version es sich handelt, .ie6, .ie7, etc.. (einfach das <html> mit dem Code oben ersetzen) Damit kannst du dann in deinem Stylesheet ganz einfach nur dem IE6 etwas zuweisen. Beispiel:

Code: Alles auswählen

/* Für die modernen Browser */
#wrapper {
  min-height: 100%
} 
/* Für den IE6 */
.ie6 #wrapper {
  height: 100%
}

naums · Beitrag von **naums** » Mi Feb 16, 2011 7:45 pm

sehr ausführlich, aber hat nichts gebracht, werder height="100%" noch style="min-height:100%". <meta charset="utf-8"> hat auch nix gebracht, das Problem bleibt beim Opera bestehen, inwiefern das auf den FF zutrifft, weiß ich net. ^^

nouseforname · Beitrag von **nouseforname** » Mi Feb 16, 2011 8:56 pm

sodele...

Ich vermute Dir geht es nur darum den Footer immer ganz unten anzuzeigen, egal wieviel Inhalt Deine Seite hat.
Dies ist locker ohne Table möglich. Ein Design über Table zu verwirklichen ist sowieso veraltet. Aber egal, ich habe dazu was gefunden und selbst ausprobiert.

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset=utf-8 />
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>TITEL</title>
	<style type="text/css">
	<!--
	* {
		text-align: center;
		margin:0;
		padding:0;
	}

	html, body {
		height:100%;
	}

	#wrap {
		min-height:100%;
	}

	/* IE Win < 7 only \*/
		* html #wrap {
		height:100%;
	}
	/* end IE Win < 7 only */

	#footer {
		height:3em;
		margin-top:-3em;
	}
	-->
	</style>
</head>
<body>
	<div id="wrap">
		Inhalt
		</div>
	<div id="footer">
		Impressum
	</div>
</body>
<html>

Funktioniert in IE, FF, Safari, Chrome und Opera. zumindest bei mir einwandfrei.

Quellen:
http://www.tutorials.de/css/304370-foot ... unten.html
http://fwpf-webdesign.de/files/upload/0 ... footer.htm
http://themaninblue.com/writing/perspective/2005/08/29/

hoffe das hilft, und ich mach mich hier nun nicht zum Affen

bbbl · Beitrag von **bbbl** » Mi Feb 16, 2011 9:21 pm

Das Problem bei deiner Lösung nouseforname ist, das wenn der Inhalt mal mehr Platz in der Höhe einnimmt, dass sich dann der Inhalt und der Footer überlagern.. Hier mein Beitrag den ich vorhin schon posten wollte, aber das Board hat irgendwie gesponnen..

naums hat geschrieben:<meta charset="utf-8"> hat auch nix gebracht, das Problem bleibt beim Opera bestehen

Das war ja nur eine generelle Empfehlung, die du evtl. bei all deinen Seiten anwenden solltest.. hatte nichts direkt mit deinem Problem zu tun..

Aber hier mal ein Beispiel, Quick'n'Dirty..

index.html

Code: Alles auswählen

<!DOCTYPE html>
  <html lang="de">
    <head>
      <meta charset="utf-8">
      <title>/////////////</title>
      <link rel="stylesheet" href="naums.css">
    </head>
    <body>
      <div id="wrap">
        <div id="page">
          <a id="action" href="//">Click Me!</a>
        </div>
      </div>
      <div id="footer">
        <a href="//">Impressum</a>
      </div>
    <script>
      (function(){
        var page = document.getElementById('page'),
            action = document.getElementById('action');
            action.onclick = function(e){
              for (var i=0; i<20; i++){
                var div = document.createElement('div'),
                    txt = document.createTextNode('Lorem Ipsum dolor sit amet..');
                    page.appendChild(div.appendChild(txt));
              }
              return false;
            };
      })();
    </script>
    </body>
  </html>

naums.css

Code: Alles auswählen

* {
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
}

body, a {
  color: #fff;
  font: 16px/140% sans-serif;
}

#wrap {
  width: 960px;
  margin: 0 auto;
  background: #222;
  min-height: 100%;
  margin-bottom: -30px;
}

#page {
  padding-bottom: 30px;
}

#footer {
  width: 960px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  background: #d00;
  text-align: center;
}

Im Prinzip hast du mit #wrap ein Div das eine min-height von 100% hat. Darunter dann noch ein Div für dein Impressum-Link das eine feste Höhe von 30px hat. Damit hat deine Seite quasi eine Höhe von 100% + 30px; Da wir aber genau 100% wollen, hat #wrap einen negativen Außenabstand von 30px (margin-bottom: -30px), also 100% - 30px(#wrap) + 30px(#footer) = 100%..

Das Div #page, in dem dann deine weiteren Inhalte reinkommen würden, hat nochmals über padding-bottom: 30px ein bisschen Luft nach unten, sodass wenn einmal mehr Inhalt vorhanden ist (Kannst in meinem Beispiel über Click Me! testen), das Impressum nicht überlagert wird.. Ich weiss, alles ziemlich strange..

Dominik · Beitrag von **Dominik** » Do Feb 17, 2011 1:21 am

Zum Glück würde ein einfaches auto !importet nicht reichen

+ie6 height wenn den unbedingt der supportet sein soll

naums · Beitrag von **naums** » Do Feb 17, 2011 11:37 am

@Dominik: bitte für Leute die Webdesign nicht studiert haben.

Community

Einstieg

Sprachen

Bibliotheksfunktionen

Fachthemen

Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)

Re: Tabelle bis zum Fensterende erweitern (Höhe)