녀석과 새들, 여기에 내가 한 일이 있습니다. 직접 문제를 해결하는 대신 몇 가지 fixer div를 추가했습니다.
우선, 여기에 몇 가지 관찰은 다음과 같습니다
우리는 #column이 더 뷰포트보다 때, #column 요구의 길이가 <body>의 높이를 지정하는 것을 알고있다.
#column이 뷰포트보다 짧은 경우 뷰포트의 높이가 <body> 인 높이를 지정해야합니다.
콘텐츠의 길이에 관계없이 모든 상황에서 열이 페이지 아래쪽으로 늘어나야합니다. 우리가 height: auto가 <body>에 설정되어 있는지 확인해야 할 첫 번째 기준에 대한
. Height 설정되어 있지 않은 경우이를 무시합니다. 또한 #column에 height: auto;과 overflow: hidden;이 있는지 확인하여 콘텐츠의 크기가 확장되도록해야합니다.
position: absolute; 및 min-height: 100%;을 <body>에 설정해야합니다. <body>의 길이는 #column보다 길지만 뷰포트보다 짧지는 않지만 확장됩니다. 이 다음 부분은 수정이 들어오는 부분입니다.
세 번째 기준에서 트릭은 추가 div를 추가하고 몇 가지 특별한 CSS를 제공하는 것입니다. 내 HTML에서는 #column 외부에서 두 div를 바로 추가했습니다. 외부의 div
<div id="colhack-outer">
<div id="colhack-inner">
</div>
</div>
<div id="column">
...
</div>
당신은 그것을 절대적으로 postiion 및 대체 상자 모델을 사용하고 패딩을 사용하여 콘텐츠 영역의 이동하도록 강요, 그것은 100 % 높이의 설정. 모든 열 스타일 (배경색, 테두리 반지름, 그림자 등)을 내부 div에 적용합니다.
#contentbox {
position: relative;
padding: <where you want to shift the column to>;
width: 50%;
color: #EEEEEC;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
라이브 예 여기 : http://nerdhow.net/
을 또한 실제 콘텐츠 컨테이너는 특별한 상자 모델을 사용하고 너무 패딩을 이동해야
#colhack-outer {
height: 100%;
padding: <where you want to shift the column to>;
position: absolute;
width: 50%;
}
#colhack-inner {
height: 100%;
width: 100%;
background-color: #303030;
}
: 여기에 내가 그들에게 적용되는 CSS입니다
질문이 있거나 명확하지 않은 경우 의견을 게시하십시오.
http://nerdhow.net/ (앞 페이지)에있는 예제가 있습니다. # contentcolumn은 # wrapper이고, .region-content는 #contact입니다. – enthdegree
이미지를 통해 내가 원하는 것을 더 잘 보여줍니다. – enthdegree
최소 높이 사용을 고려 했습니까? 내부 콘텐츠에 상관없이 콘텐츠 div의 최소 높이를 설정할 수 있습니다. 그런 다음 필요에 맞게 확장됩니다. – Paragon