머리글과 발 항상 표시

지금까지 대부분 백 엔드에서 작업했지만 지금도 일부 프런트 엔드를 수행해야합니다.머리글과 발 항상 표시

나는 다음과 같이 웹 페이지를 확인해야합니다 :

+---------------------------------------------------------------------+ 
    |                  | 
    | Header               | 
    |                  | 
    |  +------------------------------------------------------+  | 
    |  |              |  | 
    | G |              |  | 
    | r |              |  | 
    | a |              |  | 
    | d |             S |  | 
    | i |             c |  | 
    | e |             r |  | 
    | n |             o |  | 
    | t |             l |  | 
    |  |             l |  | 
    |  |             b |  | 
    |  |             a |  | 
    |  |             r |  | 
    |  |              |  | 
    |  |              |  | 
    |  +------------------------------------------------------+  | 
    |                  | 
    | Footer               | 
    |                  | 
    +---------------------------------------------------------------------+

외부 상자가 항상 전체 창을 작성해야합니다 : 머리글과 바닥 글이 항상 볼 수 있어야합니다. 화면 공간이 충분하지 않으면 내용을 포함하는 내부 상자가 스크롤 가능해야합니다.

이 외에도 위에서 아래로 기울기가 있어야합니다.

CSS로 가능합니까? 그렇다면 어떻게해야합니까?

편집 :
나는 그것을 풀 었다고 생각한다. 부분적으로는 관련된 많은 질문 (검색했지만 찾지 못했지만 관련 질문은 길을 보여주었습니다)과 부분적으로 'IP 주소'라는 대답 때문입니다.

<?xml version = "1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "nl" lang = "nl"> 

<html> 
    <head> 
    <style> 
     html, body { 
     height:   100%; 
     margin:   0px; 
     } 

     #container { 
     background:  linear-gradient(blue, white); 
     height:   100%; 
     margin:   auto; 
     width:   100%; 
     } 

     #main { 
     overflow:   auto; 
     } 

     #content { 
     background-color: white; 
     border:   1px solid black; 
     border-radius: 10px; 
     margin-left:  auto ; 
     margin-right:  auto ; 
     } 

     #footer { 
     height:   auto; 
     margin:   auto; 
     position:   relative; 
     width:   100%; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
    <script type="text/JavaScript"> 
     function doResize() { 
     var footer_height = $('#footer').height() 
     footer_height  += 2 
     $('#footer').css('margin-top', '-' + footer_height + 'px') 
     $('#main').css('padding-bottom', footer_height + 'px') 
     var footer_position = $('#footer').offset().top + window.screenY 
     var content_position = $('#content').offset().top + window.screenY 
     var newHeight  = footer_position - content_position - 2 
     var newWidth   = $(document).width() - 100 
     $('#content').css({ 
      'height': newHeight, 
      'width': newWidth 
     }) 
     } 
     $(document).ready(function() { 
     doResize() 
     }) 
     $(window).resize(function() { 
     doResize() 
     }) 
    </script> 
    </head> 

    <body> 
    <div id="container"> 
     <div id="main"> 
      <div id="header"><div class="header">Header</div></div> 
      <div id="content">Content</div> 
     </div> 
    </div> 
    <div id="footer"><div class="footer">Footer</div></div> 
    </body> 
</html>

출처

2014-04-28 Cecil Westerhof

이것은 너무 광범위합니다. – Liam

정말로 자신을 가야하고 코드를 게시해야합니다. 아무도 기꺼이 당신을 위해 단순히 당신의 일에 동행하지 않습니다. 그건 가혹한 btw 의미가 아니에요. 우리 모두는 해결책을 찾기 위해 서로 돕기를 원합니다. 그러나 무엇보다도 먼저 자신을 가야합니다. –

@BillyMoat 그는 귀여운 다이어그램을 그렸습니다. 나이가 들었을 것입니다. – rorypicko

는이 당신을 위로

<div id="container" style="background: linear-gradient(to bottom right, red , blue); height:100%;width:100%;"> 
<div id="header"> 
    Header 
</div> 

<div style="text-align:center;width:100%;"> 
<div id="sroll_box" style="width:250px;height:200px;overflow:auto;background-color:brown;text-align:center;margin-left:auto;margin-right:auto;"> 
    Content 
</div></div> 

<div id="footer"> 
    Footer 
</div> 
</div>

http://jsfiddle.net/6FLMz/

의견을주십시오 >>> TRY : 그와

내가 지금 다음을 만든 데 도움이, 어떻게 내가 무엇을해야 할 것 같습니다 도움이 더 필요합니다. 감사합니다.

출처

2014-04-28 16:10:55

머리글과 발 항상 표시

답변

관련 문제