макет со 100% высотой и верхним / нижним колонтитулом

Question

В приложении bootstrap 4.5 я делаю макет со 100% высотой и верхним / нижним колонтитулом на основе фрагмента:

https://jsfiddle.net/MadLittleMods/LmYay/

все работает нормально, пока в части содержимого не будет слишком много данных, я попытался добавить

  overflow:auto;

определение .fill-area-content

и добавил больше данных: https://jsfiddle.net/z0o1cmve/1/ но заголовок не исправлен. Как исправить?

Спасибо!

Answer 1

вы должны установить высоту .fill-area-content, header и footer

.flexbox-item.header
{
    height:35px;
    background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
    height:35px;
    background: rgba(0, 255, 0, .1);
}
.fill-area-content
{
    background: rgba(0, 0, 0, .3);
    border: 1px solid #000000;
    height: calc(100vh - (35px + 35px + 16px) );/* add this */
    overflow: auto; 
}

вычисление:

35px - высота заголовка 35px - высота нижнего колонтитула

Затем 8 пикселей, которые вы добавили для .flexbox-item со всех сторон, так что верхнее заполнение будет 8 пикселей, а нижнее заполнение будет полностью 8 пикселей - 16 пикселей

, следовательно, формула будет 100vh - other elements height высота других элементов = (35px + 35px + 16px).

Итак, height: calc( 100vh - (35px + 35px + 16px ));.

используйте vh-your_custom_height имя класса, если вы используете bootstrap.

*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

body
{
    background: #444444;
    
    color: #cccccc;
    font-size: 14px;
    /* Helvetica/Arial-based sans serif stack */
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.flexbox-parent
{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
            
    background: rgba(255, 255, 255, .1);
}

.flexbox-item
{
    padding: 8px;
}
.flexbox-item-grow
{
    flex: 1; /* same as flex: 1 1 auto; */
}

.flexbox-item.header
{
    height:35px;
    background: rgba(255, 0, 0, .1);
}
.flexbox-item.footer
{
    height:35px;
    background: rgba(0, 255, 0, .1);
}
.flexbox-item.content
{
    background: rgba(0, 0, 255, .1);
}

.fill-area
{
    display: flex;
    flex-direction: row;    
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
    
}
.fill-area-content
{
    background: rgba(0, 0, 0, .3);
    border: 1px solid #000000;
    height: calc(100vh - (35px + 35px + 16px) );
    /* Needed for when the area gets squished too far and there is content that can't be displayed */
    overflow: auto; 
}

<div class="flexbox-parent">
    <div class="flexbox-item header">
        Header
    </div>
    
    <div class="flexbox-item fill-area content flexbox-item-grow">
        <div class="fill-area-content  flexbox-item-grow">
            Content 
            <br /><br />
            Emulates height 100% with a horizontal flexbox with stretch
            <br /><br />      
            This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
            
            <p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint  occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
</p>
<ul>
    <li>Lorem 1st point </li>
    <li>Lorem 2nd point </li>
    <li>Lorem 3rd point </li>
</ul>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint  occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
</p>


<p>Lorem <strong>ipsum dolor sit</strong> amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis <strong>nostrud exercitation</strong> ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint  occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
</p>
<ul>
    <li>Lorem 1st point </li>
    <li>Lorem 2nd point </li>
    <li>Lorem 3rd point </li>
</ul>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint  occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum.
</p>

        </div>
    </div>
    
    <div class="flexbox-item footer mb-5 pb-5">
        Footer12
    </div>
</div>