Cssグリッドでヘッダーとフッターがあり、サイズ変更の途中ですか？

Question

私は、HTML/CSSでこの問題を解決する方法があるのだろうかと思っていました。

ここには、ヘッダーとコンテンツブロックとフッターを含む3行のレイアウトを生成する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でこれを行う方法があるのか​​どうか疑問に思っていましたか？

おかげで、 ラウル

更新

あなたは親コンテナが高さ設定を有するものであると他のすべてはその親に応じてサイズを変更し見ることができるように。ここで

は、それが

のように見え、あなたは親コンテナのサイズを変更すると、ヘッダーとフッターは、同じ滞在しながら、コンテンツブロックのサイズが変更するものです。

Answer 1

はい、次の3つの<div>年代といくつかのCSSでこれを行うことができます。このような

サムシング（UPDATED QUESTIONと一致するように更新）：

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

あなたのヘッダーとフッターは、コンテンツに合わせて成長しますが、主な領域が制約されます。もちろん、幅を設定することもできます。