макет CSS - Динамическое содержимое столбца определяет высота обертка

Question

вечер,
Я борюсь с компоновкой (Я всегда борюсь с CSS, проклинать его в особый вид ада!). I've simplified as best I can and set up a plunk. Я следую следующим ...

• Содержимое на всю высоту окна просмотра.
• A фиксированная высота <header> и <footer> с width: 100%.
• <footer> установлен в нижней части окна просмотра.
• Остальная часть пространства между состоит из двух колонн - Col является фиксированной шириной, Col B заполняет остальную часть ширины окна просмотра и оба height: 100%.
• Col B содержит <canvas>, который расположен по центру горизонтально.

Это макет для углового приложения я работаю и содержание в Col A генерируется на основе данных в приложении, чтобы его высота будет постоянно меняется. Я хочу, чтобы <footer> был нажат, если Col A достигает высоты, большей, чем область просмотра, но в противном случае <footer> должен оставаться на уровне bottom: 0.

In my example вы видите, что <footer> застрял снизу, но если вы уменьшите высоту видового экрана, он в конечном итоге заблокирован элементом <canvas>. Я хочу, чтобы то же самое происходило с содержимым Col A слева. Когда элементы добавляются, я хочу, чтобы <footer> нажал, если необходимо, и если окно просмотра сжимается, я хочу, чтобы содержимое Col A блокировало <footer>.

В настоящее время Col не position: absolute так блокирует ничего, но если установить его в relative она теряет свою полную высоту (зеленый фон). В принципе, я крутился по кругу с этим почти весь день. Она давно перестала быть интересной проблемой и стала настоящей болью, поэтому, если вы можете предложить какие-либо советы, я был бы очень благодарен.

Не уверен, что я очень хорошо себя объяснил. Я уточню, могу ли я, просто спросить.

Приветствия заранее

Answer 1

Не использовать абсолютное позиционирование. Используйте flexbox с flex-grow: 1, когда вы хотите что-то расти, чтобы заполнить свободное пространство.

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

Это мое предположение, основанное на лобовом Body-Лапка с левой Main-Right контейнеры. Пример может быть изменен с размерами, paddings и цветами по вашему выбору (правый контейнер установлен на нулевую ширину, поскольку он не используется). Контент холста центрирован как по горизонтали, так и по вертикали.

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; 
} 

/**/