2013-11-20 6 views
0

970px 너비의 고정 바닥 글이 있습니다. 그러나 브라우저 크기를 조정하면 전체 바닥 글이 중간에 바닥 글 가운데에 계속 표시됩니다. 970px 너비보다 작은 브라우저의 크기를 조정할 때 내 바닥 글이 화면에 표시되지 않게하고 싶습니다.브라우저 크기를 조정할 때 고정 바닥 글이 어둡게 됨

CSS

footer{ 
    z-index: 1; 
    position: fixed; 
    width: 940px; 
    line-height: 30px; 
    background: linear-gradient(#232323, #1f1f1f); 
    margin: 0 auto 0 -485px; 
    padding: 0 30px; 
    bottom: 0; 
    left: 50%; 
    text-align: center; 
} 

HTML

<footer>Footer Text</footer> 

누구가 나는 그것을 얻을 수있는 방법을 알고?

+0

바닥 글의 너비가 고정되어 있지 않은 경우 화면 너비를 너비보다 작게 조정하면 바닥 글이 화면에서 벗어나거나 창에 의해 잘릴 수 있습니다. – Huangism

답변

0

그 두 가지 옵션을 가지고 있지만 내가 추측 할 수있는 것과, 어떤 HTML없이 말할 하드 :

  1. 당신이 경우, 브라우저가 < 940px 경우 브라우저보다 큰되는 바닥 글을 중지하려면 그렇다면 width:100%max-width:940px;으로 설정하는 것이 좋습니다. 또한, overflow:hidden; 할 수 있습니다

  2. , 제대로 중심이 경우 width:100%와 사업부 내에서 랩 (또는 전체 페이지 등으로 계산) text-align:center;와 (사업부 내에 위치) 바닥 글을주고 바닥 글 밤은 margin:0 auto;

뭔가

+0

두 번째 해결책은 저를 위해 속임수였습니다! 감사. –

1

this fiddle처럼 당신은 -485px의 음의 왼쪽 여백과 50%의 왼쪽 위치를 가지고있다. 난 그냥 사용

footer { 
    margin: 0 auto; 
} 

왼쪽 위치를 모두 제거합니다.

+0

일반적으로 수평으로 센터링하는 것이 더 쉽습니다. 작업자는 수직 센터링 트릭을 사용하여 센터링을 시도합니다. 바닥 글의 크기를 조정할 때 어떤 화면에서 벗어날 것인지 고정 된 너비 바닥 글을 가지고 있기 때문에 오프 스크린이 의미하는 바가 무엇인지 모르겠습니다. – Huangism

+0

IIRC, 맨 처음 버전에는'text-align : center'가 없었습니다. 가운데가 없으면 텍스트가 왼쪽으로 사라지고 창은 바닥 글 너비보다 작아집니다. 예를 들어 [JSFiddle] (http://jsfiddle.net/fv2eN/)을 참고하십시오. –

+0

이렇게하면 실제로 원하는대로 작동하지만 가운데에 정렬되지 않고 왼쪽에 정렬됩니다. –

관련 문제