CSS Bidschirmhöhe füllen wenn dynamischer Inhalt kleiner ist

[cumulonimbus8]

Hallo!

Google liefert liefert viele 100%s, aber das hilft mir irgendwo nicht.

Ich habe einen »Seitenrahmen« der über ein Programm dynamisch mit Inhalten gefüllt wird. Einen Kopfbereich, dann die Stelle wo das Programm einsetzt, einen Fußbereich. Die Höhe des Inhaltes variiert und kann auch so weit gehen, dass sie höher als der Bildschirm ausfällt.

Nun möchte ich, dass, mit ›Flanken‹ eingeschlossen (margin-left:auto; • margin-right:auto;), der Fußbereich bis genau an die Bildschirmunterkante reicht (sofern dort Luft ist). 100% heftet die Schirmhöhe an sodass man scrollen kann.

Ich suche ein Etwas das sich unter dem Fuß, dem logischen Inhaltsende, einbringt. Der Fuß muss unter dem dynamischen Inhalt direkt beginnen und nicht selbst unten auf der Seite kleben.

CN8

 

[Mihawk90]

Ich kann mir gerade nicht so recht vorstellen wie es aussehen soll, aber wenn es in etwa so ist wie ich mir denke ggf. so:

.container {
    min-height: 100vh;
}

Aber ich hab bisschen Schwierigkeiten mir vorzustellen wie das aussehen soll.

 

[Smartass]

Sticky footer, five ways

 

[cumulonimbus8]

@smartass
Das ging an der Aufgabe vorbei.
«Ich suche ein Etwas das sich unter dem Fuß, dem logischen Inhaltsende, einbringt.»

@Mihawk90
Ich müsste nur noch rausbekommen wie ich den Container in meine Vorlagen-HTML einbauen muss.
Und ich fürchte. ohne hier testen zu können (ist fürs Büro), dass es Probleme mit dem dass, mit ›Flanken‹ eingeschlossen gibt. Evtl. muss ich das komplett umkippen.

Nichtsdestoweniger - der Knackpunkt ist:
• Kopfzone - statische Höhe
• vom Programm eingebrachter Inhalt in unbekannter Höhe
• Fußzone - statische Höhe
• der gesuchte Platzhalter der bis zum Bildschirmrand reicht oder auf 0 fällt wenn der eingebrachte Inhalt (+Kopf&Fuß) diesen Raum auffuttert.

→ Meines Googeln nach ist 100vh ungeeignet weil ich ja größer werden kann und immer noch der dynamische Teil unter dem Fuß zu deklarieren ist. Ich müsste die Höhe des vom Prog eingeflochtenen Teils kennen - allerdings steckt der in einem eigenen Container. Sind dessen Größen dynamisch fassbar um den Platzhalter zu berechnen?

CN8

 

[Teisi]

Kannst du mal umgangssprachlich sagen was du willst? Denn irgendwie versteh ich das nicht... oder zeichne es mal rudimentär auf.

Welches Programm bring was ein? Und wann? Und wie (PHP, Ajax)?

 

[cumulonimbus8]

HTML+CSS - von mehr war nicht für eine Seitendarstellung die Rede.
Und was du von der Aufstellung in #4 nicht umsetzen kannst entzieht sich mir. Also noch mal:

Der obere Bildschirmrand
Kopfteil - hat eine feste Höhe
Vom Prorgramm (das den jeweiligen vorgelegten HTML-Code parst und als regenerierte oder berechente Webpage an den Browser sendet) eingefügter Block unbekannter Höhe
Fußteil - hat ebenfalls eine feste Höhe
Der von mir gesuchte Platzhalter
Der untere Bildschirmrand

Was ich eben nicht haben will - außer Kopf+Programmteil+Fuß > Bildschirmhöhe - sind Scrollbalken, aber ein Erreichen des unteren Bildschirmrands.

Annahme: Schirmhöhe=900. Kopf=150. Fuß=100. Unbekannter Seitenteil vom Programm wird 600 hoch. Ergibt 850. Das bedürfte keiner Scrollbalken. Setze ich das Platzhalter aber auf 100vh bekomme ich einen Scrollbereich von 900+850=1750!

Ich brauche eine Funktion die aktiv die realen 850 erkennt und (dann) den Fuß auf 50 Höhe bringt. Bei einer Gesamthöhe der drei Teile von z.B. 1000 soll der Fuß auf 0 belassen werden, Scrollbalken sind ja eh unvermeidlich.

CN8

 

[character]

Mit Flexbox geht sowas.

<div class="container">
  <div class="header">Fixer Header</div>
  <div class="dynamic">Dynamischer Content</div>
  <div class="footer">Fixer Footer</div>
  <div class="spacer">Komischer Platzhalter</div>
</div>

html, body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.header {
  height: 100px;
  flex: none;
}

.footer {
  height: 50px;
  flex: none;
}

.space {
  flex: 1;
  overflow: hidden;
}

Edit: Crickets...

 

[cumulonimbus8]

Kurz geantwortet: habe ich gelesen und muss es ausprobieren wenn es sich ergibt - im Moment hat Cheffe neue Arbeit.
CN8

 

[Teisi]

Ich versteh das nach wie vor nicht...
Du hast wenn ich das richtig verstehe 4 Elemente?
Header, Aside, Main, Footer?

Der Footer soll direkt unter Main ansetzen, egal wie hoch der ist?
Der Footer soll aber so hoch sein, das wenn (Main plus Footer) < 100% Browser höhe ist. Der Footer bis zum unteren Bildschrimrand geht?

Was ist in dem Footer das dies wichtig ist?
Background? Dann gib dem body den background vom footer - die anderen elemente bekommen halt dann background #FFF;...


Und was heißt wenn 1000 Gesamthöhe erreicht - footer 0? Was 0? Die Höhe vom Footer?

Wäre schonmal super wenn du auf codepen oder wo auch immer, uns zeigst wie und was du meinst...

 

[cumulonimbus8]

Header, Aside, Main, Footer?
Nope. Header. Inhalt, Footer, Distanzbereich

Der Footer soll direkt unter Main ansetzen, egal wie hoch der ist?
Richtig. Ich will die Seitenrahmen bis ganz runter ohne dass sie sich unter dem echten Footer zu eienm U schließen. UND ohne dass Scollbalken auftauchen - sofern nicht der Inhalt mit Kopf und Fuß höher als der Bildschirm sind.

Der Footer soll aber so hoch sein, das wenn (Main plus Footer) < 100% Browser höhe ist. Der Footer bis zum unteren Bildschrimrand geht?
Nein, so nicht. Wenn (Head + Inhalt + Footer) < Bildschirmhöhe dann Distanz Zwischen Klammer und unterrtem Bildschirmrand mit Etwas präzise füllen damit links und rechts Ränder als Ränder bleiben.

Was ist in dem Footer das dies wichtig ist?
Drin ist nichts - er ist nur da um die Ränder auf Distanz zu halten, pure Optik.

Background? Dann gib dem body den background vom footer - die anderen elemente bekommen halt dann background #FFF;...
Das tut nicht weil <BODY> schon was anderes zu tun hat: er ist o.g. Inhalt und wird wenn von Etwas überschreiben (echte Header und Footer) - nur brauche ich zur Distanz eben dieses Etwas das mir fehlt.

Und was heißt wenn 1000 Gesamthöhe erreicht - footer 0? Was 0? Die Höhe vom Footer?
Exakt. In dem Falle oder baie > 1000 dann Distanzbereich 0 hoch ≡ nicht sichtbar.

Wäre schonmal super wenn du auf codepen oder wo auch immer, uns zeigst wie und was du meinst..
Das ist doch die Katze die sich in den Schwanz beißt: hätte ich Code müsste ich nicht nach welchem fragen. Und malen?! Lieber nicht. R ist der flexibel breite Rand, daer Körper hat eine feste Breite.

----------- Rand oben
RRRHHHHHRRR
RRRIIIIIRRR
RRRIIIIIRRR
RRR… … …RRR
RRRIIIIIRRR
RRRFFFFFRRR
RRRDDDDDRRR
RRR… … …RRR
RRR… … …RRR
RRRDDDDDRRR
----------- Rand unten

Die höhe der Stellen mit den … … … kenne ich nicht, sie variieren. Genauer gesagt variiert I wie Inhalt und D wie Distanz muss danach errechnet werden.

CN8

 

[Teisi]

Wenn der body keine fixe höhe hat, dann kannst du mit z. B. jQuery dir die höhe des bodys geben lassen und die höhe des bildschirms. Wenn dann body < bildschrim - dann nimmst du die differenz und setzt z. B. ein span nach dem Footer ein mit eben dieser differenz als höhe. (Oder als footer::after, oder gibst dem Footer die höhe plus die eigentliche footer höhe...) fertig.

Aber das mit den 1000 habe ich immer noch nicht verstanden


Wenn der Body den Rahmen macht kannst auch sagen wenn body kleiner bildschrim ist setzte body höhe = bildschrim höhe.

na du kannst uns aber beispiel code präsentieren, mit deinem bisherigen code - bzw. nem ausschnitt davon.


NAchtrag:

du kannst wenn es wirklich nur um Rahmen geht, das auch mit css lösen, ist aber bissi tricki:
du machst dir nen hilfscontainer direkt als child von body, dem du den rahmen gibst und sagst halt position fixed width 100% height 100%.
Dann musst halt etwas mit paddings bzw. margin arbeiten beim Inhalt, footer, header...

Da ich aber immer noch nicht wirklich deinen genauen Layoutwunsch kenne ist es schwer zu sagen wie was gehen würde.

 

[character]

Ich habe die (vermutliche) Lösung doch schon weiter oben gepostet. Wobei man wirklich sagen muss, dass ein Bild und/oder Codepen-Beispiel vom OP wirklich mal sinnvoll wäre. Die textuellen Beschreibungen sind eher... merkwürdig.

 

[Teisi]

nur das flexbox nach wie vor nicht jeder "verbreitete" browser vollständig unterstützt... :/

 

[character]

Die wenigen Flexbugs im IE11 sind nur sehr selten relevant und es ist der einzige noch unterstützte Browser, der überhaupt ein paar Probleme hat. IE10 ist mit Autoprefixer anscheinend auch ok, habe es aber nicht ausprobiert.

Es gibt wirklich keinen Grund nicht Flexbox einzusetzen. Wir benutzen das schon seit geraumer Zeit ohne Probleme im Business-Bereich.

Zum Glück hat MS den Support jeder anderen IE-Version eingestellt. Das einzige Problem ist, dass nicht klar ist, wann der Support vom IE11 dann auch endlich mal eingestellt wird. D.h. neuere Sachen als Flexbox (z.B. Grids) wird man die nächsten 5 Jahre oder länger tatsächlich nicht einsetzen können.

 

[Teisi]

na im business bereich zählen auch shops, und wenn du nen etwas größeren shop hast kannst du flexbox ohne fallback, vergessen. Denn da sind 2-3 % aller Seitenbesucher ziemlich viele ( die nutzen dann noch xp und ie8 oder 9 es gibt auch noch viele die ie 10 am laufen haben...)

Und was meinst du wie dir der kunde auf den kopf steigt, wenn plötzlich 1000 User seine seite nicht mehr ansehen können...

Ich werde frühestens ende dieses Jahres mit flexboxen für kunden beginnen.

 

[cumulonimbus8]

Ich bin zwar sicher, dass weder die HTM noch die CSS helfen, aber bitte:

XY.HTM

Spoiler

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="XY.css">
</head>
<body>
<div class="main">
<div id="top"></div><!-- Head-Line -->
<div id="middle"><!-- only a container generating a background -->
<div id="form">

 <!-- Und hier steht DYNAMISCHER Inhalt -->

</div><!-- form -->
</div><!-- middle -->
<div id="bottom"><font face='Arial' size='1'><!-- a graphic  -->
<div id="web">Ein wenig text<br></div><!-- bottom -->
<div id="logoCP1"><img src="CP1.png" height="25"></div><!-- logo CP1 -->
<div id="logoCP2"><img src="CP2.png" height="25"></div><!-- logo CP2 -->
</div><!-- main -->
<div id="pageborder"><font face='Arial' size='1'></div><!-- a line -->
</body>
</html>

XY.CSS

Spoiler

body{
 background-color:#EEEEEE;
 margin:0px;
}

.main{
 float:center;
 background-color:#EEEEEE;
}

#top{
 width:982px;
 height:95px;
 margin-left:auto;
 margin-right:auto;
 background:url(1.png); //Eine Titelleiste über volle Breite zwischen den Rahmen
 margin-top:0px;
}

#middle{
 width:982px;
 margin-top:0px;
 margin-left:auto;
 margin-right:auto;
 background:url(2.png) repeat-y; //Hintergrundschmuck mit Farbverlauf, volle Breite aber <10px hoch
}

#form{
 margin-top:0px;
 padding-top:5px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:10px;
}

#bottom{
 width:982px;
 height:44px;
 margin-left:auto;
 margin-right:auto;
 background:url(3.png); //Ein etwas höherer Kasten über volle Breite wo Text und Logos reinkommen 
 margin-bottom:0px;
 position:relative;
}
#web{
 margin-left:54px;
 float:left;
 font-family:Arial;
 color:#000080;
 font-size:10px;
 margin-top:4px;
 position:relative;
}
#logoCP1{
 float:left;
 margin-left:-250px;
 margin-top:17px;
}
#logoCP2{
 float:left;
 margin-left:-105px;
 margin-top:17px;
}
#pageborder{
 width:982px;
 margin-left:auto;
 margin-right:auto;
 background-color:#888888;
 height:1px;
 margin-top:0px;
}



input[type=submit]{
 border-radius:5px;
 border:0;
 min-width:200px;
 color:#FFFFFF;
 height:25px;
 background:#2152F7;
}

a{text-decoration:none;}
a:link{ color:#000088;}
a:visited{color:#000088;}
a:hover{
 text-decoration:underline;
 color:#0000FF;
/* background-color:#FFFF00; */
}
a:active{color:#000088;}

Die CSS soll keinen Schönheitspreis gewinnen, die Logos und Hintergründe hier einzukleben verbietet sich teilweise. Middle und FORM (für das Tag) sind im Prinzip doppelt gemoppelt.

CN8

 

[Teisi]

Schon mal ganz nett, aber mach das mal in https://jsfiddle.net/ mit bilder aus google z. B. und entspechendem content, damit man auch sieht wie es Layout technisch in etwa aussieht. Und dann kannst du noch mal genauer schreiben was genau nicht geht.

Dann fällt es uns auch sehr viel einfach zu verstehen was du meinst und dir auch vielleicht auch viel einfacher helfen.