具有100%高度和页眉/页脚的布局

Question

在bootstrap 4.5应用程序中，我根据代码片段，以100%的高度和页眉/页脚进行布局:

https://jsfiddle.net/madlittlemods/lmyay/

它工作正常，直到内容部分没有太多的数据我试图添加

  overflow:auto;

填充面积内容的定义

并添加了更多的数据:https://jsfiddle.net/z0o1cmve/1/但是header不是固定的。 我该怎么修好呢？

谢啦！

Answer 1

您必须将高度设置为。fill-area-content，页眉和页脚

.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-页脚高度

然后您为添加了8px填充。flexbox-item在所有侧面，因此顶部填充将为8px，底部填充将为8px，总计-16px

因此，公式将100VH-其他元素高度其他元素高度=(35px+35px+16px)。

因此，高度:calc(100VH-(35px+35px+16px))；。

如果使用引导程序，请使用vh-your_custom_height类名。

null

*, *: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>