전체 높이의 배경이있는 두 개의 열이 있습니까?

두 개의 고정 너비 열이있는 페이지를 만들고 싶습니다. 각각의 고유 한 배경색을 가지며 큰 내용을 스크롤 할 때도 페이지의 전체 높이에 걸쳐 스트라이칭됩니다. 설명을위한 간단한 그림 : https://dl.dropbox.com/u/3060536/twocol.png 전체 높이의 배경이있는 두 개의 열이 있습니까?

거의 내가 원하는 것을 할 수있는 몇 가지 해결책을 발견했습니다.

사방 height:100% 퍼팅만큼 스크롤하지 않는 멋지다 :이 화면의 높이에 상대적 것 같다 (긴 텍스트를 위해 아래로 스크롤 할 때 배경이 사라집니다).
height:100%을 HTML 및 본문에 넣고 min-height:100%을 div 중 하나에 넣으면 하나의 열이 전체 높이를 채울 수 있습니다. 그러나 이것은 신체 바로 아래에서 이루어져야하기 때문에, 내가 원한 중심의 2 열 레이 아웃과 결합 할 수없는 것 같습니다.
열에 padding-bottom:100000px 및 margin-bottom:-100000px을 넣고 상위에있는 overflow-y:hidden을 넣으면 화면에 모든 것이 적합하면 제대로 작동하지만 텍스트가 화면에 맞지 않으면 아래로 스크롤하는 옵션이 완전히 제거됩니다.

그래서 내가 원하는 것을하지 않습니다. 이 작업을 수행하는 적절한 방법은 무엇입니까?

출처

2013-03-03 user1111929

당신이 (대신 요소에게 배경 이미지/색상을주는) – NickSlash

인 flexbox은 최신 브라우저 –

@NickSlash에 당신을 위해 작동이 http://alistapart.com/article/fauxcolumns 같은 것을 사용할 수 있습니다 그게 효과가 있지만, 나는 평면 컬러를 위해 불필요하게 이미지 파일을 사용하지 않고도 해결책을 찾고자합니다. – user1111929

-1

필자는 이것을 테스트하지 않았으며 left: 50%; margin-left: -450px이 요소를 가운데 정렬하는 데 효과적이지 않을 것이라고 확신합니다. 하지만 그동안 HTML이 끝난 지 오래되었습니다. 내가 말했듯이

#background: { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    width: 900px; 
    left: 50%; 
    margin-left: -450px; 
    background-color: red; 
} 
#background div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 200px; 
    background-color: blue; 
}

그리고 HTML은

<div id="content"></div> 
<div id="background"><div></div></div>

업데이트

, 그것은 안된했다. 내가 #background에 height 또는 bottom을 포함하는 것을 잊었습니다.

여기

출처

2013-03-03 00:54:38 NickSlash

절대 위치 지정은 절대적으로 필요한 경우에만 수행해야합니다. – cimmanon

'절대적 위치 지정'이 무엇이 잘못된 것인지 잘 모르겠다.하지만 이것은 상호 작용하지 않는 내용 뒤에 레이어가있는 예일뿐입니다. 나는 CSS의 나머지 부분도 꽤 좋지 않을 것이라고 확신한다. – NickSlash

파란색 고정 200px 세로 막대가 왼쪽으로 정렬되도록 만드는 것입니다. 빨간색 부분은 보이지 않습니다. 나는이 방법이 정말로 효과가없는 것이 아닌가 걱정된다. – user1111929

-1

http://jsfiddle.net/bEuTU/이 blog post에서보세요 작동합니까 아이디어의 예입니다. 어떻게 작동하는지 이해하는 데는 시간이 걸렸지 만 훌륭합니다.

출처

2013-03-03 01:12:35

블로그 게시물에 링크하는 대신 해결책을 설명하거나 답안의 예를 제공해 주시겠습니까? 나는 이것이 OP의 질문에 더 많은 도움이 될 것이라고 생각한다. 다음에 다른 사람이 질문에 대한 답변을 확인하려고 할 때 블로그 게시물이 존재할 것이라는 보장이 없습니다. – Zhihao

당신은 아마 여기에 어떤 생각을 가질 수 있습니다. 위치 : 친척이 당신을 괴롭히지 않으면, 이것을 시도하십시오.

<html> 
<head> 
<title>sample</title> 
</head> 

<body style="height:100%;"> 

<center> 
    <div style="position:relative; width:900px; height:100%;"> 

     <div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;"> 
      '//some texts or controls 
     </div> 


     <div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;"> 
      '//some texts or controls 
     </div> 

    </div> 
</center> 

</body> 
</html>

출처

2013-03-03 06:23:18

이것은 전혀 작동하지 않는 것처럼 보입니다. 높이가 같지 않은 열을 여기에 제공합니다. 당신이 쓴 것을 다시 확인해 주시겠습니까? 나는 그것이 작동해야하는 이유를 알지 못하며, 실제로 그것을 테스트 할 때 작동하지 않는 것으로 판명됩니다. – user1111929

전체 높이의 배경이있는 두 개의 열이 있습니까?

답변

관련 문제