Css Grid с верхним и нижним колонтитулом и изменяющим размер средним?

Question

Так что мне было интересно, есть ли способ осуществить это в HTML / CSS.

У меня есть некоторый XAML-код, который создает трехстрочный макет с заголовком, блоком содержимого и нижним колонтитулом. Размер заголовка и нижнего колонтитула изменяется в соответствии с содержимым, в то время как блок содержимого показывает полосу прокрутки, если содержимое превышает родительский рост.

<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?

Спасибо, Raul

Обновление

Как видите, родительский контейнер - это контейнер с установленной высотой, а все остальное изменяется в соответствии с его родителем.

Вот как это выглядит

И когда вы изменяете размер родительского контейнера, размер содержимого блока изменяется, а верхний и нижний колонтитулы остаются прежними.

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%;}

Ваш верхний и нижний колонтитулы будут расти в соответствии с содержимым, но основной регион будет ограничен.Конечно, вы также можете установить ширину.