전체 너비로 창 오버 플로우 페이지

웹 사이트 (포트폴리오 재 설계)를 개발 중이며 전폭 작업을하고 있습니다. 하지만 계속해서 똑같은 문제가 발생하지만 해결을 위해 노력하고 있습니다. 단지 작동하지 않습니다.전체 너비로 창 오버 플로우 페이지

누군가 나를 도와 줄 수 있다면 고맙겠습니다. 많은 CSS를 붙여서 HTML 마크 업을하기 때문에 여기에 링크 만 붙여 넣을 것입니다. 그러나 콘솔을보고 거기에서 무슨 일이 벌어지고 있는지 볼 수 있습니다.

꽤 분명 문제, 당신은 수평 스크롤이 나타나고 내용을 스크롤 할 경우이 넓은 내 생각은 어쩌면 60 픽셀에 대해, 아무것도에 의해 단지 빈 공간을 오버 플로우 있다고 볼 수 있습니다. padding: 0;, margin: 0; 또는 내가 생각할 수있는 모든 것을 추가하려고 시도했지만 성공하지 못했습니다.

나는 overflow: hidden;을 추가하면 문제가 해결된다는 것을 알고 있지만 거기에는 오버플로가 필요합니다.

출처

2012-05-05 Roland

를, 그것은 .. 불을 지르고 .. 희망을 테스트 작업을해야 그것의 십자가 브라우저

html { 
color: #222222; 
font-family: sans-serif; 
overflow: hidden; 
}

출처

2012-05-05 13:23:19

내가 말했듯이, 나는'overflow : hidden'을 사용하지 않는 것을 선호하지만, 지금까지 유일한 해결책 인 것처럼 보입니다 : | – Roland

나는'overflow : hidden'과 함께 뭔가 잘못되었습니다. 페이지의 일부 요소가 100 % 이상 확장되고 있습니다. 그래서 wrapper를'overflow : hidden'으로 설정하는 것이 좋은 해결 방법이 될 것입니다 ..하지만 동의합니다 - 그 완벽한 솔루션이 아닙니다. –

내 브라우저에 가로 또는 세로 스크롤 막대가 표시되지 않습니다. 그러나이 같은 표준 DOCTYPE 사용해 볼 수 있습니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">

와 CSS의 시작 부분에 다음을 추가 :이 시도

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    background: transparent; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
}

출처

2012-05-05 13:22:30 sha256

아마 내 화면 크기와 스크롤바이기 때문에 "1366px"이상을 가지고있을 것입니다. 어쨌든, 나는 이미 정상화 스타일을 사용하고 있습니다. http://html5boilerplate.com은 최적화가 필요한 거의 모든 것을 최적화하기 위해 사용하고 있습니다. – Roland

그것은 약간일지도 모르다.

너비가 다르기 때문에 모든 것을 100 %로 설정 했습니까? 그러나 하단에는 여섯 가지 요소가 있습니다. 100/6 = 16.6666666666667 등등. 그것은 잘 분할하지 않습니다. 나는 당신이 16.5로 반올림 한 것을 보았습니다, 그러나 그것은 99 % 만 만들 것입니다. 나는 퍼센트의 파벌들과 행운을 빈다. 당신은 심지어 하단 20 %를 5 원소로 줄일 수 있습니까?

here처럼 고정 바닥 글과 상대 위치 지정을 사용해 볼 수도 있습니다.

HTML :

<html> 
<body> 

<div id="wrapper">  
<nav> 
    <ul> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    </ul> 
</nav> 

<footer> 
    <ul> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    <li><a href="#">Testing</a></li> 
    </ul> 
</footer> 

</div> 
</body> 
</html>

CSS : 도움이

html, body { 
    width: 100%; 
    height: 100%; 
    background-color: #333333; 
    position: relative; 
} 

#wrapper { 
    min-height: 100% 
    position: relative; 
} 

nav { 
    width: 100%  
} 

nav li { 
    display: block; 
    background-color: #222222; 
    width: 25%; 
    float: left; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

footer li { 
    display: block; 
    float: left; 
    width: 20%; 
    background-color: #cccccc; 
}

희망.

출처

2012-05-05 15:53:14

실제로, 그것은 많은 것들 때문에있을 수 있습니다. 나는 그것을 더 잘 만들었지 만, 여전히 문제는 지속됩니다. 네, footer가 어떻게 든 완벽하게 나뉘어지지는 않습니다. 그러나 볼 수 있듯이 두 개의 href 태그를 17 %로 변경하여 적합하게 만들 것입니다. 나는 5 블록을 만들려고 생각했는데, 어쩌면 결국 그렇게 할 것입니다. – Roland

전체 너비로 창 오버 플로우 페이지

답변

관련 문제