2010-08-19 4 views
1

모든 끈적한 바닥 글 CCS 예제를 시도했습니다. 모두 잘 작동합니다. 그러나 문제가 있습니다. 나는이 있다고 가정합시다 :끈끈한 바닥 글에 div 테두리를 만드는 방법은 페이지 끝까지 바닥 글까지 어떻게 확장합니까?

<div id="wrap"> 
    <div id="bodyleft">left</div> 
    <div id="bodyright">right</div> 
    <div id="footer">footer</div> 
</div> 

을 그래서, #bodyleft에 대한 height 100%이있는 경우, 경계는 바닥 글까지 뷰포트의 끝으로 확장되지 않습니다. 그것은 단지 한 줄의 내용만을 다룰 것입니다.

한 줄 또는 10 줄의 여부에 관계없이 테두리를 페이지의 끝까지 확장하고 싶습니다.

아이디어가 있으십니까?

감사합니다.

마리아

편집 :

<body> 
<div id="wrap"> 

<div id="bodyleft">on left</div> 
<div id="bodyright"> 
    some text on right<br /> 
</div> 

</div> 


    <div id="footer">footer </div> 

</body> 
</html> 



* { margin:0px; padding:0px; } 

html, body {height: 100%;} 

#wrap {min-height: 100%;} 

#footer { 
     position: fixed; 
     bottom: 0; 
     background-color: #f00; 
     height: 20px; 
     width: 100%; 
     margin-top:-20px; /* negative value of footer height */ 
} 


#bodyleft{ 
    width:222px; 
    float:left; 
    border:1px solid black; 
    overflow:auto; 
    padding-bottom:20px; 
} 

#bodyright{ 
    width:777px; 
    float:right; 
    border:1px solid black; 
    overflow:auto; 
    padding-bottom:20px; 
} 

답변

0

내가 잘못 될 수 있지만 100 %는 사업부의 내용을 표시 할만큼 높은 갈 것이라 생각합니다. 나는 당신이 min-height를 사용하여 가야 할지도 모른다라고 생각한다.

+0

아론을, 감사합니다. 나는 가능한 모든 변형을 사용하고 높이, 최소 높이, 높이 자동차, 높이 100 % .. . div의 경계를 확장하는 데 아무 것도 작동하지 않습니다. – MariaKeys

0

꼬리말을 치는 왼쪽 div의 아래쪽 경계선은 사용자 화면 크기를 모르기 때문에 까다로울 수 있습니다. 전체 마크 업 코드.

방금 ​​아래쪽 테두리를 시뮬레이션 할 수 있습니까?

+----------------------------+------------------------+ 
| LEFT DIV     |  SAME FOR RIGHT |     
|       |      | 
+----------------------------+      | 
| DIV with 1px height  |      | 
| and same width as left div |      | 
| to simulate boder   |      | 
+----------------------------+------------------------+ 
| FOOTER            | 
+-----------------------------------------------------+ 
+0

와우, 너무 빨 릅니다 .5 분을주세요. 감사합니다. Frankie. – MariaKeys

+0

* {margin : 0px ; \t 패딩 : 0px; } HTML 바디 {신장 : 100 %} #wrap {높이 분 : 100 %} 의 #footer { \t \t 총수 : 고정; 하단 : 0; background-color : # f00; 신장 : 20px; 너비 : 100 %; \t \t 여백 - 상단 : -20px;/* 바닥 글 높이의 음수 */ } #bodyleft { \t 너비 : 222px; \t float : left; \t 테두리 : 1px 검정색; \t 오버플로 : 자동; \t 패딩 바닥 : 20px; } #bodyright { \t 너비 : 777px; \t float : right; \t 테두리 : 1px 검정색; \t 오버플로 : 자동; \t 패딩 바닥 : 20px; } – MariaKeys

+0

원래 게시물에 추가했습니다. 내가 생각하는 코멘트에 코드를 추가하는 것은 불가능합니다. 내 처음이야. – MariaKeys

관련 문제