[Erledigt] Umrahmte Seite über komplette Höhe der Seite

Young Jedi · 26.11.2011, 14:15

Hallo,

ich hänge gerade schon mehrere Stunden an folgendes Problem, bei dem ich einfach nicht weiterkomme:

Ich habe eine Seite, die komplett umrahmt ist. Diese Umrahmung soll über die komplette Höhe des Browserfensters gehen, auch wenn der Inhalt nur ziemlich schmal ist. Mit folgenden dachte ich es eigentlich zu schaffen:

HTML:

Code:

<html>
    <body>
         <div class="wrapper">
         ...
          </div>
    </body>
</html>

CSS:

Code:

html, body{
    height: 100%;    
}
.wrapper{
    border: 0.4em solid #F9B030;
    height: auto !important;
    min-height: 100%;
    position: relative;


 }

Leider ist nur das .wrapper Element stets größer als das Browserfenster. Sprich:
- Browserfenster, html und body sind 100%
- .wrapper ist 100% + .8em Bordergröße, also > 100% und damit ist die Seite stets zum scrollen, auch wenn der Inhalt das gar nicht erfordern mag

Ich bin wirklich verzweifelt. Wenn mir jemand dabei helfen könnte, wäre das wirklich spitze!

Vielen, vielen Dank bereits im Vorraus,
Felix

ChrisB · 26.11.2011, 18:55

Zitat:

Zitat von Young Jedi

Leider ist nur das .wrapper Element stets größer als das Browserfenster.

Natürlich, so ist es nun mal im Box Model in CSS 2.1 definiert.

Entweder machst du das über box-sizing, und nimmst dabei in Kauf, dass es damit in älteren Browsern nicht funktionieren wird; oder du überlegst du was anderes

Young Jedi · 26.11.2011, 19:27

Zitat:

Zitat von ChrisB

Entweder machst du das über box-sizing, und nimmst dabei in Kauf, dass es damit in älteren Browsern nicht funktionieren wird

Hallo Chris,

vielen Dank für deine Antwort! Für die Anwendung ist ein moderner Browser vorhanden/vorrausgesetzt. Leider werde ich aus der Dokumentation nicht schlau und habe auch mit herumprobieren kein Erfolg erzielt. Könntest du mir eventuell ein Tipp geben, wie ich das ganze in meinem Beispiel einsetzen könnte.

Vielen Dank

ChrisB · 26.11.2011, 19:48

Zitat:

Zitat von Young Jedi

Leider werde ich aus der Dokumentation nicht schlau

Wieso nicht? Da steht doch klipp und klar, was die Eigenschaft bewirkt.

Zitat:

Könntest du mir eventuell ein Tipp geben, wie ich das ganze in meinem Beispiel einsetzen könnte.

Formatiere deinen Wrapper mit dem der drei genannten Werte, der das bewirkt, was du erreichen willst.

Young Jedi · 26.11.2011, 21:29

Ohh, ich war wohl etwas blind

Es klappt zwar nicht im FF (ich glaube das liegt an den unten genannten Bug "min-height/max-height does not work for -moz-box-sizing: border-box"), aber zum Glück soll die Seite eh nur auf Android Geräten laufen, und die haben damit keine Probleme.

Vielen Dank Chris. Find es super, wie vielen Leuten du täglich hier hilfst!

Dark Guardian · 27.11.2011, 16:28

Kurzer Einwand hiezu:

Ist es nicht so dass das Body-Element standardmäßig ein Padding gesetzt hat welches dieses Problemn auslöst?

Code:

html, body{
    height: 100%;    
    margin:0;
    padding:0;
}
.wrapper{
    border: 0.4em solid #F9B030;
    height: 100%; 
}

sollte entsprechen wirken. Ich musste jedenfalls noch nie auf box-sizing zurückgreifen.

Young Jedi · 28.11.2011, 09:53

@Dark Guardian:

Nein, dass padding und margin hatte ich auf 0 gesetzt. Das vergaß ich zu erwähnen. Das war auch bei mir nach einigen Jahren Webentwicklung das erste mal, dass ich sowas benötigt habe. Das Problem ist, dass die Situation, eine komplette Seite zu umrahmen, die auch noch über die komplette Höhe und Breite des Bildschirms gehen soll, nicht oft vorkommt. Du kannst es gerne ausprobieren. Folgender HTML Code genügt zum rumprobieren:

Code:

<html>
<body style="margin: 0; padding: 0;">
   <div  style="margin: 0; padding: 0; height: 100%; width: 100%; border: 1px solid #F00"></div>
</body>
</html>

nikosch · 28.11.2011, 19:10

Mach zwei verschachtelte Divs und vergib an das innere den Rahmen.

Dark Guardian · 29.11.2011, 14:37

Ahjo. Ich hab nicht daran gedacht das die Border auf 100% Breite draufgerechnet wird. My fault

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Besucher über Seite 1 auf Seite 2 linken	Cyda	PHP Einsteiger	7	27.02.2011 13:07
Layout in der Mitte, mit Balken über die ganze Seite	kerstel	HTML, Usability und Barrierefreiheit	5	17.12.2010 16:07
Seite für mobile Handy-Browser anpassen	gruber99	PHP-Fortgeschrittene	14	25.01.2010 16:08
Multi-Seiten-Formulare über Sessions kompatibel zu multiplen Fenstern/Tabs machen	robo47	Software-Design	5	20.12.2009 20:51
Sessions über mehrere Formularseiten?	baum2k	PHP Tipps 2009	5	27.10.2009 09:45
Div-Elemente gleichmäßig über Höhe anordnen	rocco	HTML, Usability und Barrierefreiheit	1	29.07.2009 23:53
info-overlay über ganze seite	Screeze	JavaScript, Ajax und mehr	7	24.01.2009 01:20
[Erledigt] php mysql detail Seite anzeigen über link	Rilana	PHP Tipps 2008	6	30.11.2008 17:34
seite über mail versenden	chrisbog	PHP Tipps 2006	13	17.01.2006 18:25
Menüs über die ganze Seite erstrecken?	King2k	HTML, Usability und Barrierefreiheit	4	28.12.2005 23:53
Tabelle über ganze Seite...	King2k	HTML, Usability und Barrierefreiheit	2	29.11.2005 01:15
Über zweite Seite einloggen		PHP Tipps 2005-2	7	11.09.2005 18:43
Seite nicht mit F5 oder über den Browser neu laden lassen?		PHP Tipps 2005-2	4	09.08.2005 00:58
[Erledigt] Grafik aus Form ausgelesen: Wie Infos über Breite, Höhe		PHP Tipps 2004	0	13.08.2004 12:14
Variable über eine Seite an andere übergeben?		PHP Tipps 2004	12	10.06.2004 11:00

26.11.2011, 14:15
Young Jedi Erfahrener Benutzer Registriert seit: 19.05.2008 Beiträge: 612 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Umrahmte Seite über komplette Höhe der Seite Hallo, ich hänge gerade schon mehrere Stunden an folgendes Problem, bei dem ich einfach nicht weiterkomme: Ich habe eine Seite, die komplett umrahmt ist. Diese Umrahmung soll über die komplette Höhe des Browserfensters gehen, auch wenn der Inhalt nur ziemlich schmal ist. Mit folgenden dachte ich es eigentlich zu schaffen: HTML: Code: <html> <body> <div class="wrapper"> ... </div> </body> </html> CSS: Code: html, body{ height: 100%; } .wrapper{ border: 0.4em solid #F9B030; height: auto !important; min-height: 100%; position: relative; } Leider ist nur das .wrapper Element stets größer als das Browserfenster. Sprich: - Browserfenster, html und body sind 100% - .wrapper ist 100% + .8em Bordergröße, also > 100% und damit ist die Seite stets zum scrollen, auch wenn der Inhalt das gar nicht erfordern mag Ich bin wirklich verzweifelt. Wenn mir jemand dabei helfen könnte, wäre das wirklich spitze! Vielen, vielen Dank bereits im Vorraus, Felix __________________ http://tippsgegenlangeweile.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.11.2011, 21:29
Young Jedi Erfahrener Benutzer Registriert seit: 19.05.2008 Beiträge: 612 PHP-Kenntnisse: Fortgeschritten	Ohh, ich war wohl etwas blind Es klappt zwar nicht im FF (ich glaube das liegt an den unten genannten Bug "min-height/max-height does not work for -moz-box-sizing: border-box"), aber zum Glück soll die Seite eh nur auf Android Geräten laufen, und die haben damit keine Probleme. Vielen Dank Chris. Find es super, wie vielen Leuten du täglich hier hilfst! __________________ http://tippsgegenlangeweile.de

27.11.2011, 16:28
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Kurzer Einwand hiezu: Ist es nicht so dass das Body-Element standardmäßig ein Padding gesetzt hat welches dieses Problemn auslöst? Code: html, body{ height: 100%; margin:0; padding:0; } .wrapper{ border: 0.4em solid #F9B030; height: 100%; } sollte entsprechen wirken. Ich musste jedenfalls noch nie auf box-sizing zurückgreifen. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

28.11.2011, 09:53
Young Jedi Erfahrener Benutzer Registriert seit: 19.05.2008 Beiträge: 612 PHP-Kenntnisse: Fortgeschritten	@Dark Guardian: Nein, dass padding und margin hatte ich auf 0 gesetzt. Das vergaß ich zu erwähnen. Das war auch bei mir nach einigen Jahren Webentwicklung das erste mal, dass ich sowas benötigt habe. Das Problem ist, dass die Situation, eine komplette Seite zu umrahmen, die auch noch über die komplette Höhe und Breite des Bildschirms gehen soll, nicht oft vorkommt. Du kannst es gerne ausprobieren. Folgender HTML Code genügt zum rumprobieren: Code: <html> <body style="margin: 0; padding: 0;"> <div style="margin: 0; padding: 0; height: 100%; width: 100%; border: 1px solid #F00"></div> </body> </html> __________________ http://tippsgegenlangeweile.de

28.11.2011, 19:10
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Mach zwei verschachtelte Divs und vergib an das innere den Rahmen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

29.11.2011, 14:37
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Ahjo. Ich hab nicht daran gedacht das die Border auf 100% Breite draufgerechnet wird. My fault __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".