HTML5 : 끈적한 바닥 글, 머리말 및 기사

머리글, 바닥 글 및 기사 태그가있는 간단한 페이지가 있습니다.HTML5 : 끈적한 바닥 글, 머리말 및 기사

헤더 는

HTML :

<header> 
    <div class="social"> 
     <a class="facebook-logo" href="http://www.facebook.com/"> 
      <div id="facebook"></div> 
     </a> 
     <a class="youtube-logo" href="http://www.youtube.com/"> 
      <div id="youtube"></div> 
     </a> 
     <a class="twitter-logo" href="http://www.twitter.com/"> 
      <div id="twitter"></div> 
     </a> 
    </div> 
</header> 
<article> 
    <div>Question: Who are you?</div> 
</article> 
<footer> 
    <div> 
     <span></span> 
    <div> 
</footer>

CSS :

html, body { 
     height: 100%; 
     margin: 0; 
    } 

    header { 
     height: 24px; 
     background-color: rgb(19, 147, 107); 
    } 

     header .social { 
      padding-left: 19%; 
     } 

      header .social > a > div, footer > div > span { 
       margin: 0 12px; 
       float: left; 
       height: 71px; 
       width: 50px; 
       background-image: url(sprites.png); 
      } 

       header .social > a > div#facebook { 
        background-position: -116px -141px; 
       } 

       header .social > a > div#youtube { 
        background-position: -62px -141px; 
       } 

       header .social > a > div#twitter { 
        background-position: -9px -141px; 
       } 

    article { 
     width: 300px; 
     min-height: 100%; 
     margin: 0 auto; 
    } 


     article > div { 
      font-size: 3em; 
      padding-bottom: 150px; 
     } 

    footer { 
     background-color: black; 
     height: 150px; 
     position: relative; 
     margin-top: -150px; /* negative value of footer height */ 
     clear: both; 
    } 

     footer > div > span { 
      background-position: 147px -138px; 
      height: 133px; 
      width: 138px; 
     }

내가 유체 만들기 위해 노력하고,되도록 바닥 글 바닥 글 완료

브라우저 창의 크기를 조정하더라도 스크롤 막대가 없습니다. 하지 않음
페이지 중앙에 기사 (한 줄). 는 중간에있는 텍스트를 확인하고이 시나리오에서 (수직 스크롤 바없이) 페이지 유체를 만드는 방법,

제안하십시오을 완료하지 않습니다.

출처

2013-06-01 Annie

어떤 브라우저 지원이 필요합니까? 아래 IE9을 드롭 할 수 있다면, 당신은 인 flexbox를 사용할 수 있습니다

http://jsfiddle.net/6fmxv/2/

거기 크로스 브라우저 지원을받을 필요가 다른 구문이 많이 있지만, 그것은 간단하다.

다른 구문은 여기에 포함하지 않겠지 만 소스 코드를 살펴볼 수 있습니다.

body { 
    height: 100%; 
    width: 100%; /* fixes bug in Firefox */ 
    margin: 0; 

    display: flex; 
    flex-direction: column; 
}

가 그런 다음 남은 공간을 차지하기 위해 크기를 플렉스 문서를 알려줄 필요가 :

먼저 당신은 수직 방향을 사용 후, 몸에 인 flexbox 수 있도록 그것을 알려줄 필요

article { 
    flex: 1; 
}

이제 기사를 가운데에 정렬하면됩니다. 당신은 인 flexbox 용기로 기사를 설정해야합니다 그리고 당신은 인라인 방향 모두 (수평) 중앙에, 문서 규칙에 다음과 같은 선언을 추가 할 수 있으며 블록 방향 (수직) :

article { 
    flex: 1; 

    display: flex;   
    align-items: center; 
    justify-content: center; 
}

당신은 필요 기사를 컨테이너로 만들면, body 요소를 가운데로 놓으면 머리글과 바닥 글도 가운데에 배치됩니다.

출처

2013-06-01 19:13:09

HTML5 : 끈적한 바닥 글, 머리말 및 기사

답변

관련 문제