전체 너비가있는 고정 폭 레이아웃

Question

전체 너비 (액체, 액체, 980px보다 큼) 바닥 글 및 수평 메뉴로 고정 된 980px 너비 페이지를 만들어야합니다. 고정 너비의 콘텐츠 div 외부에 두는 것이 좋겠지 만 바닥 글에는 효과가 없습니다 (메뉴에만 해당). 꼬리말은 여전히 ​​콘텐츠의 너비가 980 픽셀로 줄어 듭니다. 그리고 페이지로 가서 방화범을 통해 HTML을 확인하면 footer가 마술로 내용 div임을 확인합니다. 기본적으로 래퍼 닫기 태그 다음에 넣은 내용은 콘텐츠 div로 빨려 들어갑니다. 그러나 어떻게?

다음은 HTML입니다 :

<div class="wrapper"> 
    <header id="header"></header> 
    <nav id="horizontal_menu"></nav> 
    <div id="content"> 
    <%= yield %> 
    </div> 
    <div class="push"></div> 
</div> 
<div id="footer">some text</div> 

CSS :

html, body { 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -80px; 
} 

#content, { 
    width:980px; 
    margin:auto; 
} 

.footer, .push { 
    height: 80px; 
} 

#footer { 
    background:#393939; 
    color:#777; 
    clear:both; 
} 

(이 중요한 경우는 레일의 앱)

편집 : 문제 만 FrontPage를에 밝혀졌습니다. 다른 페이지가 잘하고 있습니다. 나는 전체 #content 스타일을 제거하고 경우

<div style="color:#515151;font-size:14px;"> 
    <div id="navslides"> 
    <nav id="sidebar"> 
     some list 
    </nav> 

    <div id="boxes"> 
     <div class="box"></div> 
     <div class="box"></div> 
    <div class="box"></div> 
    </div> 
    </div> 
    <div id="latest"> 
     <div class="frontarticle"> 
     <div class="frontarticle"> 
    </div> 
    <div class="righties"> 
    <ul class="tabs" data-persist="true"> 
     <li><a href="#view1">text</a></li> 
     <li><a href="#view2">text</a></li> 
    </ul> 
    <div class="tabcontents"> 
     <div id="view1" style="min-height:200px;">text</div> 
     <div id="view2" style="min-height:200px;">text</div> 
</div> 
    <div class="righties" style="margin-top:40px;margin-bottom:400px;"> 
    text 
    <div> 

Answer 1

당신이 게시 된 추가 HTML로, 올바르게 사업부의 폐쇄하지 않는, 페이지 마크 업이 다음과 같이 표시됩니다

<div class="wrapper"> 
    <header id="header"></header> 
    <nav id="horizontal_menu"></nav> 
    <div id="content"> 
    <div style="color:#515151;font-size:14px;"> 
     <div id="navslides"> 
      <nav id="sidebar">some list</nav> 
      <div id="boxes"> 
       <div class="box"></div> 
       <div class="box"></div> 
       <div class="box"></div> 
      </div> 
     </div> 
     <div id="latest"> 
      <div class="frontarticle"> 
       <div class="frontarticle"></div> 
       <div class="righties"> 
        <ul class="tabs" data-persist="true"> 
         <li><a href="#view1">text</a> 
         </li> 
         <li><a href="#view2">text</a> 
         </li> 
        </ul> 
        <div class="tabcontents"> 
         <div id="view1" style="min-height:200px;">text</div> 
         <div id="view2" style="min-height:200px;">text</div> 
        </div> 
        <div class="righties" style="margin-top:40px;margin-bottom:400px;">text</div> 
       </div> 
       <div class="push"></div> 
      </div> 
      <div id="footer">some text</div> 

latest

http://jsfiddle.net/TC4S5/

이 닫혀 있지, content은 아니다 닫히고 wrapper가 닫히지 않았습니다. style="color:#515151;font-size:14px;"의 div도 닫히지 않습니다.

콘텐츠 꼬리표가 콘텐츠 div 안에있는 이유는 실제로 있기 때문입니다! 콘텐츠 div는 절대로 닫히지 않았습니다. 마크 업을 다시 한 번 살펴볼 필요가 있습니다.

Answer 2

그것은 나를 위해 작동 : DIV 그래서 여기 페이지에 따라 내용에 "수율" "항복"대체되는 frontpage.html.erb입니다 단지 .wrapper에 폭을 추가

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -80px; 
    width: 980px; 
} 

See it running on JS Fiddle합니다.