Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Größenangaben in %

Guybrush Threepwood
in Webdesign

Empfohlene Antworten

Veröffentlicht

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?

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.

  • Autor

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?

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.

  • Autor

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...

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]

  • Autor

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.

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.

  • Autor

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.

  • Autor

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...:(

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?

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.

  • Autor

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.

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?

  • Autor
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 :\

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.