Größenangaben in %

Guybrush Threepwood · 21. Februar 2007

Angenommen ich hab folgende Seite



<html>

<head></head>

<body>

   <table height="100%" width="100%" bgcolor="#FFFF01">

      <tr>

         <td> 

            srfsrg

         </td>

      <tr>

   </table>

</body>

</html>

[/PHP]

Dann erhalte ich eine Tabelle die immer das gesamte Browserfenster ausfüllt weil die Höhe und Breite ja 100% sind.

Jetzt ist meine Seite aber eine ASP.NET Seite und ASP.NET fügt in alle Seiten unter anderem folgenden Tag ein

[PHP]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Das sorgt wohl dafür das die Seite XHTML konform ist. Aber das bewirkt auch das die Tabelle nicht mehr die Gesamte Höhe des Browser ausfüllt sondern nur noch eine Zeile. Die Breite bleibt weiterhin auf der gesamten Browserbreite.

Kann mir jemand erklären warum die Höhe dadurch nicht mehr 100% des Browserfensters ist?

Bubble · 21. Februar 2007

Kann mir jemand erklären warum die Höhe dadurch nicht mehr 100% des Browserfensters ist?

Weil die "height"-Angabe für "table"-Elemente nicht zum Standard gehört (und es auch nie tat), obwohl sie von vielen Browsern unterstützt wurde/wird.

Guybrush Threepwood · 21. Februar 2007

Hmm hab gerade mal bei Self-Html nachgesehen und du hast Recht.

Aber im <td> Tag ist height auch vom Standard her zulässig, wie soll man denn dann da mit % Angaben arbeiten wenn man die gesamte Tabelle (auf die sich ja dann die Prozente der <td>s beziehen) nicht in ihrer Größe festlegen kann?

Bzw. könnte ich ja dann nur mit festen Größenangaben in Pixel arbeiten oder wie muss ich das verstehen?

Bubble · 21. Februar 2007

Du könntest CSS verwenden und dem Tabellen-Element, sowie allen umgebenden Elementen, eine "height"-Angabe mitgeben.

Wenn es nur darum geht den Viewport komplett zu füllen, kannst Du auf eine Tabelle mit genau einer Zelle auch verzichten.

Guybrush Threepwood · 21. Februar 2007

Ja hab eben auch einen interessanten Artikel dazu gefunden der mich zu folgender Lösung gebracht hat:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type='text/css'>

html,body{

      margin:0;

      padding:0;

      height:100%;

      border:none

   }


#fullheight{height:100%}

</style>


</head>

<body>

   <table id="fullheight" height="100%" width="100%" bgcolor="#FFFF01">

      <tr>

         <td> 

            srfsrg

         </td>

      <tr>

   </table>

</body>

</html>

[/PHP]

Jetzt muss ich nur noch rausfinden warum er das in meiner eigentlichen komplexeren Seite nicht annimmt...

Bubble · 21. Februar 2007

Fange doch mit folgendem Beispiel an, das auf Deinem Beispielcode basiert und erweitere.

Du musst bedenken, dass Du den Beispielcode so erweiterst, dass Ränder (margin, padding) entfernt werden, damit die Darstellung im Browser auch 100% der Höhe einnimmt und nicht 100% plus Randabstände.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  


<html style="height:100%"> 

   <body style="height:100%"> 

      <table style="height:100%" width="100%" bgcolor="#00FFFF"> 

         <tr> 

            <td>  

               Inhalt

            </td> 

         <tr> 

      </table> 

   </body> 

</html>

[/PHP]

Guybrush Threepwood · 21. Februar 2007

Ja, aber das Problem liegt wie ich eben bemerkt habe an andere Stelle.

In der eigentlichen Tabelle sollen sich nachher Textareas befinden und da klappt der Trick mit der Höhe über css leider nicht so (außer natürlich ich mach den DocTYPE wieder raus).

Im Prinziep soll da am Ende eine Tabelle mit mehreren Spalten rauskommen. In den Spalten sind Textareas und die sollen sich immer so resizen das alles im Fenster sichtbar ist ohne das man scrollen muss.

Bubble · 21. Februar 2007

Ich bin momentan in Eile und kann Dir daher im Augenblick nicht sofort weiterhelfen. Wenn Du aber genauer beschreibst, was Du tun willst, dann sehe ich es mir nachher noch einmal genauer an.

Guybrush Threepwood · 21. Februar 2007

Ok, also ich hab die Beispielseite um eine Textarea erweitert:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type='text/css'>

html,body{

      margin:0;

      padding:0;

      height:100%;

      border:none

   }



</style>


</head>

<body>

   <table  style="height:100%" width="100%" bgcolor="#FFFF01">

      <tr>

         <td> 

            <textarea style="height:50%" name="area1" rows="2" cols="20" id="area1"></textarea>

         </td>

      <tr>

   </table>

</body>

</html>

[/PHP]

Diese soll sich auch immer dynamisch an die Tabellengröße anpassen.

So wie es im Beispiel ist klappt es aber wieder nur wenn man die erste Zeile mit dem DocType rausnimmt.

Guybrush Threepwood · 21. Februar 2007

Hab mir mal ne Javascript Lösung zusammengeschustert:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type='text/css'>

html,body{

      margin:0;

      padding:0;

      height:100%;

      border:none

   }



</style>

<script type="text/javascript">


function resizetext()

{

	var size = document.getElementById('blubb').offsetHeight * 0.08;

	document.getElementById('area1').style.height = size;

}

window.onresize = resizetext;

</script>

</head>

<body id="blubb">

   <table border="1" style="height:100%" width="100%" bgcolor="#FFFF01">

      <tr>

         <td> 

            <textarea style="height:50%" name="area1"id="area1"></textarea>

         </td>

      <tr>

   </table>

</body>

</html>

[/PHP]

Hoffe aber das da irgendwer noch ne schönere Lösung für hat mit der man auf Javascript verzichten kann.

Ansonsten muss ich das morgen mal so in der kompletten Seite ausprobieren...

.vash · 21. Februar 2007

Wenn Du auf die Tabelle verzichten würdest ... Ich vermute Du benutzt die Tabelle zum Layout? Ist aber sage ich mal ein Hilfsmittel, dass Du nicht mehr brauchst wenn Du z.B. div-Container benutzt.

Dass sich aber Textboxen ohne weiteres (also ohne Javaskript) resizen habe ich bisher noch nirgends gesehen. Wofür ist das denn wichtig?

Guybrush Threepwood · 21. Februar 2007

Das ist wie gesagt dazu wichtig damit die alle auf einer Seite angezeigt werden ohne das ein Scrollbalken entsteht wenn man eine kleiner Auflösung benutzt.

geloescht_JesterDay · 22. Februar 2007

Ja hab eben auch einen interessanten Artikel dazu gefunden der mich zu folgender Lösung gebracht hat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type='text/css'>

html,body{

      margin:0;

      padding:0;

      height:100%;

      border:none

   }

...

[/php]
[/Quote]

Der gute, alte html,body-Hack Das mag auf den ersten Blick funktionieren, aber sobald dein Dokument größer als eine Bildschirmhöhe ist, wird der Hintergrund beim Scrollen nicht erweitert. Falls du also ein buntes Bild im Hintergrund hast, ist das Bild auch nur so hoch wie der Viewport, also sobald du nach unten scrollst ist der Hintergrund da plötzlich weiß.

EDIT:
Ich glaube mich aber zu erinnern, dass ein overflow: auto dabei dieses Problem behebt. Dabei aber AFAIR andere Probleme verursacht.
Bin mir aber nicht mehr 100% ( ) sicher.

Es ist numal so, dass 100% Höhe laut Standard nicht der Browserhöhe entsprechen.

Guybrush Threepwood · 22. Februar 2007

Da keine der Seiten größer als eine Bildschirmhöhe (oder Breite) sein soll wäre das nicht so schlimm wenn es da Probleme gäbe.

Wir haben das aber jetzt noch ein wenig abgewandelt und das nur für das body tag gesetzt und zusätzlich noch

position: absolute;

gesetzt.

Bisher sah es erstmal ok aus.

geloescht_JesterDay · 22. Februar 2007

Da keine der Seiten größer als eine Bildschirmhöhe (oder Breite) sein soll ...

Bei deiner Auflösung und Schriftgröße, oder wo ist das festgelegt?

EDIT:

Und wer schreibt vor, dass Browser immer Fullscreen laufen müssen?

Guybrush Threepwood · 22. Februar 2007

Bei deiner Auflösung und Schriftgröße, oder wo ist das festgelegt?

EDIT:
Und wer schreibt vor, dass Browser immer Fullscreen laufen müssen?

Das ist alles schon korrekt festgelegt und für das Problem unwichtig

Aber in der eigentlichen Kontentseite klappt das durch mehrere Verschachtelungen und so leider nicht mehr so gut wie in der Testseite, deswegen müssen wir uns da wohl was andere überlegen wie wir das alles auf einer Seite unterbringen :\

Anmelden

Größenangaben in %

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte