가장 좋은 방법

Question

나는 현재 내 웹 페이지에 대해 다음과 레이아웃이 : 저는 왼쪽과 오른쪽의 콘텐츠 모음에 대한 반복 배경 - 이미지를 만들었습니다

<div class="content-body"> 
    <div class="left-content-bar siteborder"></div> 
    <div class="inner-content"> 
    ... some content 
    </div> 
    <div class="right-content-bar siteborder"></div> 
    </div> 

합니다. 나는 바가 항상 페이지의 상단에서부터 페이지의 끝까지 가도록하고 싶다. 나의 현재 문제는 바가 내부 내용 (바의 끝 부분에있는 내용의 아래쪽 끝 부분)만큼의 공간 만 차지한다는 것입니다.

막대가 항상 아래로 갈 수 있도록 해결책을 찾았습니다. 그러나 이것은 작은 화면 해상도로 많은 공백을 가질 것이기 때문에 내가 좋아하지 않는 최소 높이를 포함합니다.

(높이 항상이와 최소 1000px 될 것이며, 이것은 안) 내 현재 솔루션이 CSS를 참조하십시오

.content-body{ 
position:relative; 
overflow:hidden; 
min-height: 1000px; 
height: auto !important; 
height: 1000px; 
} 
.left-content-bar{ 
    float:left; 
    position:relative; 
    width: 10px; 
    background-image: url(/default/images/content-left.png); 
    background-repeat:repeat-y; 
    margin:0px; 
    padding:0px; 
    padding-bottom: 32000px; 
    margin-bottom: -32000px; 
} 
.right-content-bar{ 
    float:left; 
    position:relative; 
    width: 14px; 
    background-image: url(/default/images/content-right.png); 
    background-repeat:repeat-y; 
    margin:0px; 
    padding:0px; 
    padding-bottom: 32000px; 
    margin-bottom: -32000px;  
} 
.inner-content{ 
float:left; 
width:956px; 
position: relative; 
height: auto; 
min-height: 100% !important; 
} 

나는 누군가가 나에게 내 현재보다 더 나은 솔루션을 제공 할 수 있기를 바랍니다

Answer 1

나는 약간 다르게이 접근 것이다. 샘플과 같은 HTML을, 내 CSS는 다음과 같이 보일 것입니다 :

.left-content-bar{ 
    position:fixed; 
    width: 10px; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    background:url(/default/images/content-left.png) repeat-y; 
} 
.right-content-bar{ 
    position:fixed; 
    width: 10px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background:url(/default/images/content-right.png) repeat-y; 
} 
.inner-content{ 
    padding: 0 10px; /* same padding left and right as the width of the sidebars */ 
} 

나는 고정 사이드 바 위치. bottom 속성과 top 속성을 모두 0으로 설정하면 뷰포트의 높이까지 늘어납니다. 그런 다음 실제 내용 래퍼에 일부 패딩을 추가하여 사이드 바 및 내용이 겹치지 않도록합니다. http://jsfiddle.net/4Swvu/1/

당신이 좀 더 설명을 원하는 경우 문의 주시기 바랍니다 :

나는 보여주기 위해 작은 예제를 설정합니다.

편집 :
당신보다는 당신이 뷰포트에, 당신은 약간의 코드를 적응할 수, 콘텐츠에 사이드 바를합니다.

.content-body { 
    position: relative; 
    width: 400px; 
    margin: 0 auto; 
} 
.left-content-bar{ 
    position:absolute; 
    width: 10px; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    background:#cff; 
} 
.right-content-bar{ 
    position:absolute; 
    width: 10px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background:#cff; 
} 
.inner-content{ 
padding: 0 10px; /* same padding left and right as the width of the sidebars */ 
} 

와 바이올린 : http://jsfiddle.net/4Swvu/5/

Answer 2

float 대신 inline-block을 사용해 보셨습니까?

원래 float를 사용하여 그림 주위에 텍스트를 표시하고 divs를 원하는대로 표시하지 않았습니다 (가능한 경우 수레에서 멀리 이동하십시오).

어쨌든 display:inline-block;을 사용하면 서로 옆에 3 개의 div를 넣을 수 있으며 왼쪽 및 오른쪽 열이 아래쪽에 도달 할 수 있습니다.

.content-body{ 
    height:1000px; 
} 
.siteborder{ 
    height:100%; 
    width:100px; 
    display:inline-block; 
    vertical-align:top; 
} 
.inner-content{ 
    width:150px; 
    display:inline-block; 
    vertical-align:top; 
} 

라이브 예 : http://jsfiddle.net/8vQrU/