带页眉和页脚的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%;} 

页眉和页脚将增长到适合的内容，但主要区域将受到限制。当然你也可以设置宽度。