帶頁眉和頁腳的Css網格並調整中間大小？

Question

所以我想知道是否有辦法在HTML/CSS中解決這個問題。

我在這裏有一些XAML代碼，它產生一個3行佈局，頭部和內容塊以及頁腳。頁眉和頁腳根據內容調整大小，而內容塊如果內容大於父母高度則顯示滾動條。

<Grid Height="300"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <TextBlock Grid.Row="0" Background="Green">I'm a Header</TextBlock> 
    <ScrollViewer Grid.Row="1"> 
     <StackPanel TextBlock.FontSize="50"> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
      <TextBlock>Content</TextBlock> 
     </StackPanel> 
    </ScrollViewer> 
    <TextBlock Grid.Row="2" Background="Red">I'm a Footer</TextBlock> 
</Grid> 

我只是想知道是否有辦法在HTML中做這樣的事情？

謝謝，勞爾

更新

正如你可以看到父容器是一個設定的高度，一切調整大小，根據它的父。

這裏是什麼樣子

而且當調整父容器內容分塊大小調整，而頁眉和頁腳保持不變。

Answer 1

是的，你可以用三個<div>的和一些CSS做到這一點。

像這樣的東西（更新以匹配已更新問題）：

<div id="wrapper"> 
<div id="header">Header Content Here</div> 
<div id="content">Main Content Here</div> 
<div id="footer">Footer Content Here</div> 
</div> 

有了這個CSS：

#content{height:100%; overflow:scroll;} 
#wrapper{height:100%;} 

頁眉和頁腳將增長到適合的內容，但主要區域將受到限制。當然你也可以設置寬度。