머리글과 바닥 글이 있고 크기를 조정하는 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

예, 세 <div> 's 및 일부 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%;} 

귀하의 머리글과 바닥 글은 내용에 맞게 성장할 것이다, 그러나 주요 영역이 제한됩니다 . 물론 너비도 설정할 수 있습니다.