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

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