HTML: Seiten größe an Bildschirmauflösung anpassen
- Ersteller Bierfassl Rules
- Erstellt am
Bierfassl Rules
Captain Special
Hallo Gemeinde,
ich habe gerade ein Problem mit Firefox.
Ich will die Seitengröße also "width" von "Body" dynamisch je nach Bildschirmauflösung anpassen.
Hierzu habe ich folgendes kurzes JavaScript.
Leider funktioniert dies nicht unter Firefox, jedoch unter IE und Opera.
Hat jemand eine andere Idee die Firefox akzeptiert?
Danke für die Hilfe!
B.R.
ich habe gerade ein Problem mit Firefox.
Ich will die Seitengröße also "width" von "Body" dynamisch je nach Bildschirmauflösung anpassen.
Hierzu habe ich folgendes kurzes JavaScript.
HTML:
<script type="text/javascript">
var screenWidth = screen.width;
window.onload=function()
{
screenWidth = screenWidth - 71; // 71 muss abgezogen werden, sonst muss gescrollt werden
document.body.style.width = screenWidth;
}
</script>Leider funktioniert dies nicht unter Firefox, jedoch unter IE und Opera.
Hat jemand eine andere Idee die Firefox akzeptiert?
Danke für die Hilfe!
B.R.
BoMbY
Grand Admiral Special
Wie wäre es mit z.B. width="XX%" oder einfach per CSS und standardkonform? Seitenlayouts per Javascript sind eigentlich kein guter Stil.
Edit: Also mit CSS einfach den Außenabstand festlegen, oder die Position von allen Seiten aus bestimmen, statt die Breite anzugeben? Siehe http://de.selfhtml.org/css/eigenschaften/index.htm
Edit: Also mit CSS einfach den Außenabstand festlegen, oder die Position von allen Seiten aus bestimmen, statt die Breite anzugeben? Siehe http://de.selfhtml.org/css/eigenschaften/index.htm
Zuletzt bearbeitet:
Aus eigeneer erfahrung kann ich BoMbY nur recht geben, CSS ist hier das mittel der Wahl und sollte wenn man Standardkonforme Webseiten schreibt (Doctype!) auch kein Problem sein.
Eine kurze Google-Suche sollte auch einige Treffer aufzeigen dazu.
Window.onload ist übigens ind er Konstellation unter Umständen problematisch weil window.onload evtl. feuert bevor der Browser überhaupt mit HTML parsen fertig ist, und daher der body möglicherweise noch garnicht existiert wenn dein script aufgerufen wird.
Das handhaben die Browser teils sehr unterschiedlich. Ich würde mal ausm Stehgreif mutmaßen dass z.B. Safari sich genauso benehmen wird wie Firefox.
Also bitte mit CSS arbeiten. Und falls du auf noch mehr ideen mit window.onload kommen möchtest, schau dir mal jQuery an. Das ist ne nette kleine hilfs-Bibliothek die einem einiges vereinfach und einen kurzen, in allen browsern funktionierende Weg anbietet eine Funktion beim "onload" ausführen zu lassen... und zwar in allen Browsern erst dann wenn das Dokument fertig geladen ist (In FF wäre das übrigens das DOMContentLoaded - Event)
Grüßchen
ich
Eine kurze Google-Suche sollte auch einige Treffer aufzeigen dazu.
Window.onload ist übigens ind er Konstellation unter Umständen problematisch weil window.onload evtl. feuert bevor der Browser überhaupt mit HTML parsen fertig ist, und daher der body möglicherweise noch garnicht existiert wenn dein script aufgerufen wird.
Das handhaben die Browser teils sehr unterschiedlich. Ich würde mal ausm Stehgreif mutmaßen dass z.B. Safari sich genauso benehmen wird wie Firefox.
Also bitte mit CSS arbeiten. Und falls du auf noch mehr ideen mit window.onload kommen möchtest, schau dir mal jQuery an. Das ist ne nette kleine hilfs-Bibliothek die einem einiges vereinfach und einen kurzen, in allen browsern funktionierende Weg anbietet eine Funktion beim "onload" ausführen zu lassen... und zwar in allen Browsern erst dann wenn das Dokument fertig geladen ist (In FF wäre das übrigens das DOMContentLoaded - Event)
Grüßchen
ich
Bierfassl Rules
Captain Special
Hallo,
schon mal Danke für die Antworten!!!
Wie kann ich die Größe je nach Bildschirmauflösung anpassen?
Mein Problem ist nämlich das wenn ich das Fenster verkleinere, mir teilweise Rahmen durcheinander geschoben werden. Wenn ich jedoch die Größe des Bodys vorher mit meiner JavaScript-Funktion festlege, so verschiebt sich nichts. (was auch logisch ist)
Ich muss sagen auch wenn es vielleicht nicht unbedingt der "gute" Stil ist![:]](https://www.planet3dnow.de/vbulletin/images/smilies/rolleyes.gif "Augen rollen (sarkastisch) :]")
, finde ich die Lösung sehr gut. Wenn sie nun in FF funktionieren würde wäre es "perfekt" 
Die Sache mit dem window.onload kann ich natürlich abändern.
Gruß
B.R.
schon mal Danke für die Antworten!!!
Wie kann ich die Größe je nach Bildschirmauflösung anpassen?
Mein Problem ist nämlich das wenn ich das Fenster verkleinere, mir teilweise Rahmen durcheinander geschoben werden. Wenn ich jedoch die Größe des Bodys vorher mit meiner JavaScript-Funktion festlege, so verschiebt sich nichts. (was auch logisch ist)
Ich muss sagen auch wenn es vielleicht nicht unbedingt der "gute" Stil ist
, finde ich die Lösung sehr gut. Wenn sie nun in FF funktionieren würde wäre es "perfekt" Die Sache mit dem window.onload kann ich natürlich abändern.
Gruß
B.R.
Also, um ein Layout zu erstellen dass die ganze Seite einnimmt, kannst du z.b. CSS benutzen...
Eigentlich sollte google da einige treffer liefern aber ausm stehgreif in etwa sowas:
Das sollte den body auf die volle verfügbare Größe strecken.
Sowohl horizontal wie vertikal.
Aufpassen muss man mit paddings und margins bei den Elementen innerhalb des Bodys, damit man ihn nicht "dehnt" von der Breite her. sonst bekommst du scollbalken.
ind FF kanns tdu deinen code in etwa mit einem solchen konstrukt zur ausführung bringen, falls du den weg wirklich gehen willst:
einfach mal geklaut von hier:
Du müsstest theoretisch aber beide versionen des codes benutzen, da der IE DOMContentLoaded nicht kennt.
Sauberer Weg geht über CSS....
Edit:
Funktionieren mag die Lösung, schön ist sie aber keineswegs, denn 1. bürdet man dem Browser unnnötige Rechenlast auf und 2. gibt es nicht wenige User die im zeitalter von Phishing und Co. mit deaktiviertem JS surfen und es nur in Ausnahmefällen einschalten... Skript sollte der letzte ausweg sein, wenn es keinen anderen weg gibt... verglichen mit den Eigenheiten bei documentElement, Dem Event-Objekt und dergleichen chaos sind die CSS-Bugs der Browser regelrecht Kinderkram...
Eigentlich sollte google da einige treffer liefern aber ausm stehgreif in etwa sowas:
Das sollte den body auf die volle verfügbare Größe strecken.
Sowohl horizontal wie vertikal.
Aufpassen muss man mit paddings und margins bei den Elementen innerhalb des Bodys, damit man ihn nicht "dehnt" von der Breite her. sonst bekommst du scollbalken.
ind FF kanns tdu deinen code in etwa mit einem solchen konstrukt zur ausführung bringen, falls du den weg wirklich gehen willst:
Wofür natürlich statt dem alert die entsprechene funktion einzusetzen wäre
einfach mal geklaut von hier:
Du müsstest theoretisch aber beide versionen des codes benutzen, da der IE DOMContentLoaded nicht kennt.
Sauberer Weg geht über CSS....
Edit:
Funktionieren mag die Lösung, schön ist sie aber keineswegs, denn 1. bürdet man dem Browser unnnötige Rechenlast auf und 2. gibt es nicht wenige User die im zeitalter von Phishing und Co. mit deaktiviertem JS surfen und es nur in Ausnahmefällen einschalten... Skript sollte der letzte ausweg sein, wenn es keinen anderen weg gibt... verglichen mit den Eigenheiten bei documentElement, Dem Event-Objekt und dergleichen chaos sind die CSS-Bugs der Browser regelrecht Kinderkram...
Zuletzt bearbeitet:
Blutsturz
Commodore Special
und im Zeitalter von Web 2.0 und Ajax wird diese Anzahl an Usern kleiner...sollte man vielleicht dazusagen, wer will schon auf die ganzen <ironie>coolen</ironie> dinge verzichten...
bzgl. der Höhe solltest du aber beachten, dass du jedes Kindelement explizit ansprechen musst, welche die Seite auf die 100% aufbläst...aber wie die Vorposter schon sagten, bleib bei css und alles wird gut werden
Bierfassl Rules
Captain Special
Das mit body
habe ich bereits vorher versucht, hatte allerdings den Scrollbalken.
Jetzt werde ich einmal noch das
versuchen.
Ich arbeite übrigens ausschließlich mit css.
Code:
width: 100%;Jetzt werde ich einmal noch das
Code:
Margin: 0px;Ich arbeite übrigens ausschließlich mit css.
Zuletzt bearbeitet:
body alleine reicht nicht, das html-element bitte nicht vergessen! - und die scrollbalken kommen wohl am ehesten zustande wenn der content nicht in den rahmen passt... also schauen was drin ist im body und wie groß alles ist und ggf. mit overflow:hidden oder sowas arbeiten.
Bierfassl Rules
Captain Special
So, hab das ganze jetzt versucht.
Also hab das ganze jetzt mit
versucht.
Allerdings bekomme ich immer noch den Scrollbalken.
Mit
wird die Seite einfach abgeschnitten.
Hab nun mal zum Teste folgendes versucht:
funktioniert allerdings in FF nicht, wobei die Anweisung:
ansich in IE schon funktioniert.
Also hab das ganze jetzt mit
Code:
html
{
width: 100%;
margin: 0px;
}
body
{
width: 100%;
margin: 0px;
}versucht.
Allerdings bekomme ich immer noch den Scrollbalken.
Mit
Code:
overflow: hiddenHab nun mal zum Teste folgendes versucht:
Code:
document.addEventListener("DOMContentLoaded", function()
{
document.getElementById("meinbody").style.width = 50px;
}
,
false);funktioniert allerdings in FF nicht, wobei die Anweisung:
Code:
document.getElementById("meinbody").style.width = 50px;ansich in IE schon funktioniert.
Zuletzt bearbeitet:
Gib doch mal paar weitere infos wie die seite aufgebaut ist, wie sieht der code aus etc.
IE lässt allerlei schmarrn zu, unter anderem auch dass man expplizit die größe für inline-elemente setzen kann. Nicht dass body ein inline-element wäre, aber wer weiß schon was da vor sich geht.
Allgemein ist der Weg mit CSS die anerkannte methode den body auf "Maximalgröße" also die größe des fensters zu ziehen, wenn du trotzdem scrollbalken kriegst, ist wohl der inhalt des body zu groß...
Behaupte ich jetzt mal so, ohne den code zu sehen ist das schwierig.
Nebenbei denke ich das 50px gehört in anführungsstriche, also "50px";
Gruß,
ich
IE lässt allerlei schmarrn zu, unter anderem auch dass man expplizit die größe für inline-elemente setzen kann. Nicht dass body ein inline-element wäre, aber wer weiß schon was da vor sich geht.
Allgemein ist der Weg mit CSS die anerkannte methode den body auf "Maximalgröße" also die größe des fensters zu ziehen, wenn du trotzdem scrollbalken kriegst, ist wohl der inhalt des body zu groß...
Behaupte ich jetzt mal so, ohne den code zu sehen ist das schwierig.
Nebenbei denke ich das 50px gehört in anführungsstriche, also "50px";
Gruß,
ich
