對于一個螢屏（100vh）上的三元素（標題、正文、頁腳）欄，我希望標題固定在頂部，頁腳固定在底部，然后正文占據中間的所有空間（中間空間）。請注意，頁眉和頁腳也可以是任何尺寸（文本或影像），所以我不能事先固定它們的高度。
正文的尺寸事先是未知的，例如它可以是顯示電子郵件的區域。如果正文的尺寸小于中間的空間（只有幾封郵件），它將全部占用。如果它比較大（許多郵件），它應該全部拿走，但不會擴大頁面，把頁腳全部推到下面，只有在滾動到底部時才能看到。也就是說，我希望每個元素都是一個獨立的部分，固定在頂部/中部/底部，而中間的部分則占據所有的中間空間，無論它是大是小。
我在Codepen上使用Flexbox和Absolute positioning進行操作。
在主體中，有一些注釋出來的項，用于擴展和收縮主體。
對于flexbox主體占用所有空間，我有flex: 1 1 auto但是當主體大于中間空間時，flex-grow: 1和flex-base: auto擴展了主體，并將頁腳推倒。我不知道如何讓主體擴展到占據中間的空間，但無論大小都固定在那個高度。
絕對位置版本在這里是可行的。在頁眉和頁腳之后，給主體以一定的高度，并將其置于頁眉的正下方。讓頁眉和頁腳position: fixed; z-index: 2將它們固定在頂部和底部，而不考慮正文的大小。這里的問題是，我給頁眉和頁腳分配了一些固定的高度，但我希望它們是不固定的（自動）。我希望布局的標題能夠顯示文本（因此可能是30px高）或影像（可能是100px高）。
請告知。我能想到的唯一的解決方案是使用JS來讀取絕對定位版本的頁眉和頁腳高度。但如果可能的話，我希望使用純 CSS。
uj5u.com熱心網友回復： 這里是一個只使用css的解決方案：
.container-fluid {
height: 100vh;
overflow-x: hidden;
}
.col-12 {
display: flex;
flex-direction: column;
flex: 1;
}
.header {
position: sticky;
top: 0;
background: lightblue;
}
.body {
flex: 1 1 auto;
}
.footer {
position: sticky;
bottom: 0;
background: lightblue;
}< main class="container-fluid p-0"/span>>
<main class="row h-100"/span>>
<section class="col-12">
<div class="header bg-info w-100">
<h1>Welcome to FMail (flexbox)</h1>
</div>/span>
<div class="body bg-dark text-white p-0 w-100" >
<h5>主郵件框（應始終占據頁眉和頁腳之間的所有空間）</h5>/span>
<ul>/span>
<li>Email 1</li>/span>
<li>Email 2</li>/span>
<li>Email 3</li>/span>
<li>Email 4</li>/span>
<li>Email 5</li>/span>
<li>Email 6</li>/span>
<li>Email 7</li>/span>
<li>Email 8</li>/span>
<li>Email 9</li>/span>
<li>Email 10</li>/span>
<li>Email ...</li>/span>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
<li> Email ...</li>
</div>/span>
<div class="footer bg-info w-100">
<h5>我是頁腳（應該固定在底部）</h5>
</div>/span>
</section>/span>
</main>/span>
</main>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/326415.html
標籤：