Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

[HTML/CSS] Div bis zum Bottom einer Seite ausdehnen.

  • 1
  • 2

Werbeanzeige

BlueCobold

Community-Fossil

  • »BlueCobold« ist der Autor dieses Themas

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

1

02.04.2011, 11:46

[HTML/CSS] Div bis zum Bottom einer Seite ausdehnen.

Moin.

Eigentlich klingt es trivial, aber... ich finde da keinen Weg mit CSS rein.
Ich habe eine Seite, body und html auf 100% height (schwarz), ein zentriertes div auf 100% height (rot). Darin eine Kopfzeile mit Höhe 200 Pixel (blau). Darunter einen Block mit Inhalt (gelb). Dieser soll immer bis zur unteren Kante der Seite reichen. Feste Größe geht nicht. Auf 100% height setzen geht auch nicht, denn dann steht er unten 200 Pixel über (durch die Kopfzeile). (siehe Bild)
Wie löst man das vernünftig? Hab schon 100 Dinge bei Google erfragt, nichts ist das, was ich brauche. Da geht es entweder nur um die Positionierung eines Footers ganz unten oder um ein div von 100% Höhe. Aber nie um ein div der Höhe "100% minus 200 Pixel".

Hat jemand 'ne Idee?
»BlueCobold« hat folgendes Bild angehängt:
  • Unbenannt.png
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

TrikkieMikkie

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

2

02.04.2011, 11:53

Quellcode

 
1
2
3
4
5
6
7

#gelb
{
    position: absolute;
    top: 200px;
    bottom: 0;
    /* ... */
}
fka tm

BlueCobold

Community-Fossil

  • »BlueCobold« ist der Autor dieses Themas

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

3

02.04.2011, 12:32

Jo, das hatte ich auch schon, habe dann aber links den inneren Abstand nicht hinbekommen, gelb rutscht an den linken Rand von rot. Der ist im Bild auch enthalten. Denn "left" kann ich da ja nicht verwenden.
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

TrikkieMikkie

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

4

02.04.2011, 12:38

Ok.

Die Abstände kannst du ja bei Bedarf ändern. ;)
»TrikkieMikkie« hat folgende Datei angehängt:
  • css.zip (692 Byte - 79 mal heruntergeladen - zuletzt: 29.03.2024, 09:05)
fka tm

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »TrikkieMikkie« (02.04.2011, 12:55)

Wirago

Alter Hase

Beiträge: 1 193

Wohnort: Stockerau

Beruf: CRM Application Manager

  • Private Nachricht senden

5

02.04.2011, 13:03

ich hab das bei meiner hp so gelöst:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<style type="text/css">
div.container { margin-top:30px; margin-bottom:20px}

#titel {
  border-left-width:5;
  border-style:solid;
  border-right-width:5;
  border-color:white;
  border-top-width:5;
  border-bottom-width:0;
  padding:0;
  text-align:justify;
}

#menue {
  border-left-width:5;
  border-bottom-width:5;
  border-style:solid;
  border-color:white;
  padding:0;
  border-top-width:0;
  border-right-width:0;
  text-align:justify;
}

#inhalt {
  border-right-width:5;
  border-bottom-width:5;
  border-left-width:0;
  border-top-width:0;
  border-style:solid;
  border-color:white;
  padding:0;
  text-align:justify;
}
-->


einfach "0" als abstand eingeben...

BlueCobold

Community-Fossil

  • »BlueCobold« ist der Autor dieses Themas

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

6

02.04.2011, 13:06

Wirago, ich sehe da irgendwie nichts, was Bezug zu meiner Frage hätte.

@Trikkie: Danke. "right" hab ich vergessen ^^ Klar, damit geht's prima.
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »BlueCobold« (02.04.2011, 13:12)

TrikkieMikkie

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

7

02.04.2011, 13:12

Passts so?
fka tm

BlueCobold

Community-Fossil

  • »BlueCobold« ist der Autor dieses Themas

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

8

02.04.2011, 13:12

Siehe edit.
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

TrikkieMikkie

Supermoderator

Beiträge: 3 731

  • Private Nachricht senden

9

02.04.2011, 13:23

Wirago

Hast du das direkt aus deiner HP rauskopiert?

Wenn ja: Keine gute Idee, die Styles in die Seite einzubinden. Extern CSS rocks! ;)

Quellcode

 
1
2
3
4
5
6
7
8
9
10

#titel {
  border-left-width:5;
  border-style:solid;
  border-right-width:5;
  border-color:white;
  border-top-width:5;
  border-bottom-width:0;
  padding:0;
  text-align:justify;
}

Größenangaben, wenn nicht 0, sollten eine Einheit (%, px...) haben.

Vermutlich ist der Code auch schlecht zu warten.
So ginge es auch:

Quellcode

 
1
2
3
4

#titel {
  border: 5px solid #fff;
  border-bottom: none;
}
fka tm

BlueCobold

Community-Fossil

  • »BlueCobold« ist der Autor dieses Themas

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

10

22.04.2011, 08:29

So.... jetzt weiß ich auch wieder, warum das mit dem "bottom" nicht so gut ging :P
Denn, ist das innerste Element größer als 100% (sagen wir mal 100% sind 800 Pixel, der Inhalt aber 2000), heißt also wenn es einen vertikalen Scroll-Balken benötigt, dann ... geht das Design nur bis 800 Pixel und weitere 1200 Pixel darunter schwebt der Text im Nirvana.
Beispiel von Trikkie erweitert im Anhang. Hab schon verschiedene Sachen ausprobiert mit min-height und solcher Späße... bekomm's nich gebacken. Eine hässliche Alternative wären verschiedene Styles für kurze und für lange Seiten, möchte ich aber eigentlich eher ungern.
»BlueCobold« hat folgende Datei angehängt:
  • Desktop.rar (625 Byte - 66 mal heruntergeladen - zuletzt: 09.04.2024, 13:54)
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »BlueCobold« (22.04.2011, 08:39)

Werbeanzeige

  • 1
  • 2

Ähnliche Themen