웹 사이트 레이아웃 문제 및 모범 사례

Question

내가

• 머리글 구역 전체 폭 내용 바 & 위젯 바 870px 폭
• 과목 센터 웹 사이트의 레이아웃을 갖고 싶어 메인 템플릿을 설계
• 100 % 바닥 글 섹션 100 %

샘플과 하단에

저작권 바 디자인이 바이올린에 설치되었습니다 http://jsfiddle.net/7zavu4f4/

어떤 이유로 인해 바닥 글 섹션이 표시되지 않고이 디자인 사원이 다양한 높이의 내용 영역에서 내용을 조정할 수 있는지 알고 싶습니다.

좋은 방법으로 디자인되었거나 깨끗하게 변경해야합니다.

<div class="header-wrapper"> 
    <div class="search-bar">Search control will be on right</div> 
    <div class="logo-Wrapper">Logo Will Be here</div> 
    <div id='cssmenu'> 
     <ul> 
      <li class='active'><a href='#'><span>Home</span></a> 

      </li> 
      <li><a href='#'><span>Products</span></a> 

      </li> 
      <li><a href='#'><span>Company</span></a> 

      </li> 
      <li class='last'><a href='#'><span>Contact</span></a> 

      </li> 
     </ul> 
    </div> 
</div> 
<div class="content-wrapper"> 
    <div class="content-bar"></div> 
    <div class="widget-bar"></div> 
</div> 
<div class="footer-wrapper"></div> 
<div class="copyright-wrapper"></div> 

우리는 모바일 jQuery를 기반으로이 웹 사이트의 별도의 모바일 버전을 가지고 나는 이것에 대한 대응 버전이 필요하지 않습니다 .. 그래서만을 고려 데스크톱 버전을 확인하시기 바랍니다

Answer 1

당신은 당신의 디자인을 테스트 한 다른 브라우저와 화면 크기가 다르기 때문입니까? PC 및 Mac? 기계적 인조 인간? IOS?

특정 모바일 버전을 사용하는 대신 표준 웹 사이트를 모든 화면 크기로보기 좋게 만드는 것이 좋습니다. 모든 사람이 870px 너비의 브라우저 창을 가지고있는 것은 아니며 좁은 전화 뷰포트뿐만 아니라 1920x1080 화면이나 1440x900 화면에서 페이지가 어떻게 표시되는지 고려해야합니다. 고려해야 할 몇 가지 사항은 대형 화면에서 메인 컨텐츠를 더 넓게 만들고 위젯을 중앙 컬러 컨텐츠 영역 외부에 배치하고자하는지 여부입니다.

당신이 당신의 마크 업 (즉, HTML)을 향상시키고 자하는 경우

는 HTML5 스펙을 살펴 가지고 있고, 특히 의미 론적 태그에 같은 <article>은 <section>는 <header> 및 <footer>는 - 그것은 더 의미 론적으로 적절한 사용하는 것입니다 부하가 <div> s보다 큰 요소. HTML5 Rocks에는 html5 리소스의 훌륭한 목록이 있습니다.

Answer 2

바닥 글 & 페이지에서 위에 떠 다니는 요소가 있기 때문에 저작권 섹션이 표시되지 않습니다. 그래서 그들은 실제로 모든 수레 뒤에 앉아 있습니다.

간단한 clear: both은이 두 바닥 글 요소를 나타냅니다. 약간의 높이, 예를 들어 height:10px 또는 일부 텍스트를 추가하여 볼 수 있습니다.