CSS-Layout - Dynamische Spalteninhalt definiert Wrapper Höhe

Question

Abend,
ich mit einem Layout habe Schwierigkeiten (ich immer mit CSS kämpfen, fluchen sie auf eine spezielle Art von Hölle!). I've simplified as best I can and set up a plunk. Ich bin nach dem folgenden ...

• Inhalt auf die volle Höhe des Ansichtsfensters.
• Eine feste Höhe <header> und <footer> mit width: 100%.
• Die <footer> wird am unteren Rand des Ansichtsfensters festgelegt.
• Der Rest des Raumes zwischen zwei Spalten - Col A ist fester Breite, Col B den Rest der Darstellungsfeld Breite füllt und beide sind height: 100%.
• Spalte B enthält eine <canvas>, die horizontal zentriert ist.

Dies ist ein Layout für eine Angular App arbeite ich an und der Inhalt in Col A auf Daten in der App generiert basiert, so dass es Höhe ist immer wechselnden wird. Ich möchte die <footer> gedrückt werden, wenn Col A erreicht eine Höhe größer als das Ansichtsfenster, aber sonst sollte die <footer> bei bottom: 0 bleiben.

In my example Sie sehen, die <footer> ist auf der Unterseite stecken, aber wenn Sie die Höhe des Ansichtsfensters reduzieren, wird es schließlich durch das Element <canvas> blockiert. Ich möchte das gleiche passieren mit dem Inhalt von Col A auf der linken Seite. Wenn Elemente hinzugefügt werden, möchte ich die <footer> drücken, wenn nötig, und wenn das Ansichtsfenster schrumpft, möchte ich die Col A Inhalt die <footer> blockieren.

Im Moment Col A ist position: absolute so nicht blockiert, aber wenn ich es relative gesetzt verliert es seine volle Höhe (der grüne Hintergrund). Im Grunde bin ich damit den ganzen Tag im Kreis herumgerannt. Es ist schon lange kein interessantes Problem mehr und ist zu einem echten Schmerz geworden. Wenn Sie mir einen Rat geben können, wäre ich Ihnen sehr dankbar.

Nicht sicher, ob ich mich sehr gut erklärt habe. Ich werde klären, wenn ich kann, einfach fragen.

Prost im Voraus

Answer 1

Verwenden Sie keine absolute Positionierung. Verwenden Sie flexbox mit flex-grow: 1, wenn Sie wollen, dass etwas wächst, um den verfügbaren Platz zu füllen.

html { 
 
    height: 100%; 
 
} 
 
html, body, #page-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
    margin: 0; 
 
} 
 
#page-wrapper { 
 
    flex-direction: row; 
 
    background-color: #ff6900; 
 
} 
 
header { 
 
    background-color: #9b9b9b; 
 
    height: 40px; 
 
} 
 
#ui-wrapper { 
 
    background-color: #00ff00; 
 
    width: 120px; 
 
} 
 
.filler { 
 
    background-color: gold; 
 
    height: 50px; 
 
    border-bottom: 3px double; 
 
} 
 
#display-wrapper { 
 
    margin-top: 40px; 
 
    flex-grow: 1; 
 
} 
 
canvas { 
 
    display: block; 
 
    border: solid 1px red; 
 
    margin: 0 auto; 
 
} 
 
footer { 
 
    background-color: #8e8e8e; 
 
}

<header>Header</header> 
 
<div id="page-wrapper"> 
 
    <div id="ui-wrapper"> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    <div class="filler">x</div> 
 
    </div> 
 
    <div id="display-wrapper"> 
 
    <canvas width="300px" height="300px"></canvas> 
 
    </div> 
 
</div> 
 
<footer>Footer</footer>

Answer 2

Dies ist mein Vorschlag, basierend auf einem Head-Körper-Fuß mit der linken Main-Rechts-Container. Das Beispiel kann mit Größen, Auffüllen und Farben Ihrer Wahl optimiert werden (Rechter Behälter auf Null Breite eingestellt, da er nicht verwendet wird). Content Canvas ist sowohl horizontal als auch vertikal zentriert.

Fiddle: https://jsfiddle.net/javierrey/t8a74d93/11/

HTML:

<div class="lay"> 
    <div class="lay-head"> 
    <div class="lay-main"> 
    Header 
    </div> 
    </div> 
    <div class="lay-body"> 
    <div class="lay-left"> 
    Left 
    </div> 
    <div class="lay-right"> 
    </div> 
    <div class="lay-main"> 
     <canvas class="content"> 
     </canvas> 
    </div> 
    </div> 
    <div class="lay-foot"> 
    <div class="lay-main"> 
    Footer 
    </div> 
    </div> 
</div> 

CSS:

/* General default (Bootstrap compatible) */ 

html, body {width: 100%; height: 100%;} 
body {margin: 0; overflow-x: hidden; overflow-y: auto; background-color: #ffffff;} 
body, input, textarea, keygen, select, button {color: #555555;} 
* {box-sizing: border-box; font-family: sans-serif; font-size: 14px;} 
*:focus {outline: 0;} 
a {text-decoration: none;} 
textarea {resize: none; overflow: auto;} 

/* Default Layout */ 

.lay {position: relative; overflow: hidden; height: 100%;} 
.lay-head {position: absolute; overflow: hidden; top: 0; width: 100%; height: 0;} 
.lay-foot {position: absolute; overflow: hidden; bottom: 0; width: 100%; height: 0;} 
.lay-body {overflow: hidden; width: 100%; height: 100%; padding-top: 0; padding-bottom: 0;} 
.lay-left {overflow: hidden; float: left; height: 100%; width: 0;} 
.lay-right {overflow: hidden; float: right; height: 100%; width: 0;} 
.lay-main {overflow-x: hidden; overflow-y: auto; width: auto; height: 100%;} 

/* Custom Layout */ 

.lay>.lay-head, .lay>.lay-foot { 
    height: 32px; 
    text-align: center; 
} 

.lay>.lay-body { 
    padding-top: 32px; /* Same as head height */ 
    padding-bottom: 32px; /* Same as foot height */ 
} 

.lay>.lay-body>.lay-left { 
    width: 150px; 
} 

.lay>.lay-body>.lay-right { 
    width: 0; 
} 

/* Content */ 

.lay>.lay-body>.lay-main { 
    text-align: center; 
    padding: 20px; /* Custom: 0, 20px */ 
} 

.lay>.lay-body>.lay-main>.content { 
    position: relative; /* Center vertically (1) */ 
    top: 50%; /* Center vertically (2) */ 
    transform: translateY(-50%); /* Center vertically (3) */ 
    width: 100%; 
    height: 100px; 
} 

/* Theming */ 

body { 
    background: #ffffff; 
} 

body, input, textarea, keygen, select, button { 
    color: #777777; 
} 

.lay>.lay-head, .lay>.lay-foot { 
    background-color: #000000; 
    color: #cccccc; 
    text-align: center; 
    padding-top: 7px; 
} 

.lay>.lay-body>.lay-left { 
    padding: 7px; 
    background-color: #dddddd; 
    color: #555555; 
} 

.lay>.lay-body>.lay-main>.content { 
    background-color: #333333; 
} 

/**/