바닥 글 너비 설정

안녕하세요 다음 문제가 있습니다. 나는 바닥 글을 폭과 높이로 매입했다. 지금까지 바닥 글에는 배경색이 없었습니다. 이제는 전체 너비에 걸쳐 바닥 글을 펼치고 배경색을 지정하는 것이 좋을 것이라고 생각했습니다.바닥 글 너비 설정

내 문제는 단순히 "reapeat-x"라고 말한 색상으로 바닥 글을 채울 수있는 방법을 모르겠다는 것입니다. 나는 나의 배경으로 그것을했다 body. 메인 페이지의 내용이 하나의 높이에 고정되어 있지 않기 때문에 이미지를 쉽게 만들 수 없습니다. 이 예제의 꼬리말이 바닥에 머물 것이라는 것을 깨닫는 방법을 알고 싶습니다.

http://razzi.me/tour

희망이 내가 달성하기 위해 노력하고 분명히 무엇을 만들어 :이 페이지의 솔루션 크기를 조정할 때 당신이 무슨 뜻인지 볼 수있는

나는 예를 발견했다. 나를 도울 수있는 누군가가 있다면 나는 정말로 감사 할 것입니다.

감사합니다.

출처

2012-07-16 bonny

'배경 - color' – Inkbug

네,하지만 이것은 단지 색을 채 웁니다. 그건 문제가 아니야. 내가 가진 문제는 배경색을 사용할 때 고정 너비가 있다는 것입니다. – bonny

배경이 전체 너비가 아니라 바닥 글의 특정 폭을 채울 수 있도록 하시겠습니까? –

이 효과를 달성하기 위해, 당신은 래퍼 외부에서 바닥 글을 배치해야합니다. 나는 보통 sticky footer을 사용합니다.

HTML

<div class="wrapper"> 
    <div class="push"></div> 
</div> 
<div class="footer"></div

CSS

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto; 
    margin: 0 auto -50px; 
    width: 960px; 
} 
.footer, .push { 
    height: 50px; 
} 

.footer { 
    width: 100%; 
    background: blue; 
}

JS 바이올린 : http://jsfiddle.net/3KDYX/

출처

2012-07-16 14:11:51 JSW189

안녕하세요,이 예제를 사용해 보았습니다. 나는 여전히 숨겨진 div에 문제가있다. 트리거가 열리는 경우 바닥 글은 페이지 끝으로 이동하지 않습니다. 숨겨진 div를 건너 뜁니다. 나는 476px의 고정 div 있습니다. 그 후에 버튼을 누르면 다른 div가 표시됩니다. – bonny

@bonny. 좀 더 구체적으로 코드를 보여줄 수 있습니까? [JS 피들] 만들기 (http : // jsfiddle.net)을 소스 코드와 함께 사용하면 나에게 도움이 될 것입니다. – JSW189

확실히, 여기 있습니다 : http://jsfiddle.net/9Cuee/ 감사합니다. – bonny

내가 정확하게 코드에서 발생하는있는 레이아웃하지만 960이 될 수있는 전체 폭 바닥 글과 내용을 갖고 싶어 경우로 레이아웃을 설정 할 수있는 것을 모르는 :

<body> 
    <div id="header"> 

     <div class="wrapper"> 

     </div> 

    </div> 

    <div id="container" class="wrapper"> 

     //your container with 960px width 

    </div> 

    <div id="footer"> 

     <div class="wrapper"> 

     </div> 

    </div> 
</body> 
<!-- I suggested to have a wrapper in header and footer so that 
    your text or links or whatever you have could be in 960px width 
    but your header and footer backgrounds spawns to full-width 
-->

및 CSS를 뭔가 될 것이다 : 당신이 바닥 글 배경색이 윈도우의 100 % 폭으로 확장해야 할 경우

body { width:100% } 

#header, #footer { width:100% } 

.wrapper { width:960px } 

#footer { clear:both; height:100px; bottom:0; display:block; background-color:#555; }

출처

2012-07-16 14:09:45 Asif

, 당신의 mainwrapper 밖으로 이동해야합니다. CSS에서 다음

<div id="mainwrapper"> 
    stuff goes here 
</div> 
<div id="footerwrapper"> 
    <footer> 
     Stuff goes here 
    </footer> 
</div>

: : 같은 뭔가

#mainwrapper { 
    width: 960px; 
    margin: 0 auto; 
} 

#footerwrapper { 
    background-color: blue /* or whatever */; 
} 

footer { 
    width: 960px; 
    margin: 0 auto; 
}

출처

2012-07-16 14:11:07 chipcullen

바닥 글 너비 설정

답변

관련 문제