div에 오버플로가 있습니까?

이전에 내 첫 번째 질문에서 설명한 것처럼 3 열 배경 형식을 만들었습니다. How to create a three-column website background using CSS?. 어쨌든, 나는 그것이과 같이 성공적으로 대부분의 작업이 있습니다div에 오버플로가 있습니까?

내 모든 페이지의 내용 (헤더, 콘텐츠, 바닥 글 등)을 포함, 아이디 centercolumn와 사업부가 있습니다

<html> 
    <body> 
     <div id="centercolumn"> 
      <!-- content --> 
     </div> 
    </body> 
</html>

그런 다음, CSS의를 본질적으로, 몸 전체 페이지의 배경을 제공

body { 
    background-image: url('theimagetobetiledalongthesides.png'); 
} 

#centercolumn { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 

    margin-left: auto; 
    margin-right: auto; 

    width: 760px; 

    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png'); 
}

는 다음 centercolumn의 DIV 그 위에 이동 및 페이지 아래 모든 방법을 뻗어 : 나는 (단지 관련 코드를 표시) 다음 설정이 , 그리고 배경 이미지가 다릅니다. 이렇게하면 내용이 가운데에 하나, 측면에 두 개의 열이있는 모양이 나타납니다.

내가 가지고있는 문제는 centercolumn div의 overflow 속성과 관련이 있다고 생각합니다. 테스트 한 모든 브라우저 (Chrome, Firefox, IE, Opera 및 Safari)에서 가운데 열은 처음에는 페이지 아래쪽으로 이동합니다 (필요한 경우). 세로로 페이지의 크기를 조정할 때 페이지의 크기를 작게/줄이면서 실제 내용 (텍스트)에 도달하면 페이지/브라우저 측면에 스크롤바가 나타납니다 (평소대로). 그러나 나머지 콘텐츠를보기 위해 아래로 스크롤하면 가운데 열 div가 완전히 아래로 이동하지 않는 것처럼 보입니다. 가운데 열의 다른 배경 이미지가 부분적으로 멈 춥니 다 (정확하게 브라우저 하단이 이전에 있었던 부분). 나는 뒤로 물러났다.) 내 텍스트는 가운데 컬럼 배경 이미지에서 벗어나 몸의 배경 이미지로 실행됩니다.

centercolumn div의 오버플로를 scroll으로 설정하고 페이지의 크기를 조절할 때 div가 잘린 것처럼 보이지만 centercolumn 배경 이미지가 잘리지 않습니다. 스크롤 막대가 브라우저 측면이 아닌 중간 내용 열의 측면에 실제로 나타나는보기 흉한 효과.

브라우저 창 크기를 세로로 조정할 때 중간 열의 측면에 스크롤 막대가 나타나지 않고 가운데 내용 열의 다른 배경 이미지를 최대한 줄이려면 어떻게해야합니까?

편집 : JSFiddle 예제는 http://jsfiddle.net/dDfkC/1/입니다.

출처

2012-10-15 user1748196

같이 주요 열의 왼쪽과 오른쪽 열 정적 위치에 대한 고정 된 위치를 사용할 수 있습니까? 어쩌면 [jsfiddle] (http://jsfiddle.net) – Ibu

@Ibu 좋아, http://jsfiddle.net/dDfkC/1/에서 예제가 있습니다. 나는 이미지보다는 색상을 사용하여 만들었지 만, 브라우저 창 크기를 세로로 조정하면 jsfiddle에서 결과 패널을 아래로 스크롤 할 때 볼 수 있습니다. – user1748196

달성 싶은 것이 좋을 것이다 : 절대,을하는 당신이 상대적인 위치를 사용하려면 margin : 0 auto; 이 열을 가운데에 배치하십시오.당신이해야 할 일은

그것을

#centercolumn { 
    position:relative; 
    margin: 0 auto; 
    width:760px; 
    background-image: url(whatever); 
    background-repeat: both; 
}

을 설정 그리고 당신이 원하는 경우에 상관없이 당신이 얼마나 작은 내용 페이지의 하단에 확장 없습니다 :

body, html { 
    height:100%; 
}

를 추가합니다 에

#centercolumn { 
    min-height: 100%; 
}

진짜 기본 CSS 리셋 위 :

* { 
    margin:0; 
    padding:0; 
}

출처

2012-10-15 22:20:57

이것은 거의 완벽하게 작동하지만, 이제는 가운데 열이 페이지 상단으로 이동하지 않습니다. 꼭대기보다 조금 앞에 멈 춥니 다. 페이지를 위아래로 이동하려면 어떻게해야합니까? – user1748196

CSS 재설정, 브라우저의 기본 여백 및 패딩은 다음과 같습니다. css의 시작 부분에 추가하십시오. * {margin : 0; 패딩 : 0;} –

멋지게 작동합니다. 감사합니다! – user1748196

이 같은 시도 할 수 :

#centercolumn { 
    position: absolute; 
    top: 0; 
    min-height:100%; 

    margin: auto; 

    width: 760px; 
    background-repeat: repeat-x; 
    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png'); 
}

아마 당신은 무엇의 예를 참조하고 정확하게 당신은 위치를 사용하는

출처

2012-10-15 22:20:42 Bloafer

http://jsfiddle.net/dDfkC/1/에서 내 목표의 예를 볼 수 있습니다. 나는 이미지보다는 색상을 사용하여 만들었지 만 정확한 효과는 똑같습니다. 반복되는 배경 이미지의 문제가 아니라 광산이 자동으로 수직 및 수평으로 반복됩니다 (원하는 것은 수직 또는 수평으로 올바르게 타일링되지 않습니다). jsfiddle에서 내 기본적인 아이디어를 볼 수 있습니다 : 내용이있는 가운데 열 및 다른 배경 디자인이있는 두 개의 측면 열. – user1748196

시도해보십시오. http://jsfiddle.net/dDfkC/4/ – Bloafer

당신은 당신의 코드의 작업 예제를 표시 할 수 있습니다이 jsfiddle

출처

2012-10-15 22:24:22 nathan

그는 마크 업을 전혀 갖고 있지 않다는 것을 제외하고는; 또한 콘텐츠가 커짐에 따라 문제가 발생하고 다른 요소가 컨테이너에 추가됩니다. –

@Patrick JC 추가 한 왼쪽 및 오른쪽 열을 제외하고는 동일한 마크 업입니다. 그 칼럼은 [이 질문에서] (http://stackoverflow.com/questions/12903474/how-to-create-a-three-column-website-background-using-css)에 설명되어 있으며, 첫 번째 절. 또한이 방법으로 어떤 문제가 발생합니까? – nathan

더 적은 CSS를 사용하고 html 마크 업을 추가하지 않아도 해결할 수있는 문제를 해결하기 위해 두 개의 새로운 div와 css를 추가했습니다. 또한 그는이 가운데 열을 내용으로 채우고 (아마도이 계획을 수행 할 가능성이 높습니다) 래퍼에 정적 위치를 지정하면 플로트 문제 및 abosolute positioning 문제가 발생할 수 있습니다. 또한 사이드 바에 대한 자신의 배경 이미지에 따라 스크롤을 자연스럽지 않게 만들면 재미 있고 문제를 일으킬 수 있습니다. 솔루션이 작동하는 동안 다른 문제가 발생할 수 있으며 추가 코드가 많이 추가됩니다 (현실감있게 말하기). –

div에 오버플로가 있습니까?

답변

관련 문제