콘텐츠 div 나머지 높이

-1

나는 머리글, 바닥 글 및 두 개의 열이있는 레이아웃을 얻으려고합니다. 사이트의 너비는 화면 해상도 및 높이에 상대적이어야합니다. 오른쪽 열의 폭은 250px 여야합니다. 내용이 큰 경우 왼쪽 열 (내용)에 세로 스크롤 막대가 있어야합니다.콘텐츠 div 나머지 높이

다른 말로하면 머리글, 바닥 글 및 오른쪽이 항상 보이고 고정되어야합니다. 필요한 경우 콘텐츠에 세로 스크롤 막대가 있어야합니다.

감사

편집 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 

<style type="text/css"> 
    body { 
    font: 11px Tahoma, Arial; 
    margin: 0; 
    padding: 0; 
    color: #3d5770; 
    background-color: #A7A7A7; 
} 
    #wrapper 
{ 
    min-width: 987px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 98%; 
} 
    #header 
{ 
background-color: orange; 
    clear: both; 
    float: left; 
    width: 100%; 
    height:100px; 
    background-color: orange;  
} 
    #main 
{  
    width: 100%; 
    background-color: White; 
} 

#footer 
{ 
    position: absolute; 
    bottom: 0px; 
    height: 30px; 
    clear:both; 
    background-color: aqua; 
    margin-left: auto; 
    margin-right: auto; 
    width: 98%; 
}  

#content 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 30px; 
    overflow: auto; 
    margin-right: 262px; 
    background-color: White; 
} 

#right 
{  
    width: 245px;  
    float: right; 
} 

#rightInner 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 30px; 
    width: 244px; 
    background-color: Lime; 
} 


</style> 
</head> 

<body> 

<div id="wrapper">   
    <div id="header">header</div> 

    <div id="main"> 
     <div id="right"> 
      <div id="rightInner">Banners</div> 
     </div> 

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

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

</body> 
</html>

당신이 볼 수 있듯이

는, 컨텐츠 사업부가 수평입니다 성장하고 높이가 화면의 최대 높이입니다. 이것은 내 22 "화면에서 잘 작동하지만 난 화면 크기를 변경할 때 나는

출처

2011-12-01 Ralph Jansen

Google에서 볼 수있는 코드가 있습니까? 이 예제를 가지고있는 곳이 많이 있습니다 - 하나의 가능한 링크 : http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ –

무엇이 질문입니까? 너 뭐 해봤 니? – Polynomial

http://rentacoder.com이 더 적절하다고 생각합니다. – deviousdodo

나는 마침내 해결책을 발견 당신이 원한다면 당신은 그것을 삭제할 수 있습니다

참고 :..이 IE7에서 작동하지 않습니다!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>Untitled 1</title> 
    <style type="text/css"> 
     body 
     { 
      font: 11px Tahoma, Arial; 
      margin: 0; 
      padding: 0; 
      color: #3d5770; 
      background-color: #A7A7A7; 
     } 
     #header, #footer, #main 
     { 
      position: absolute; 
      min-width: 987px; 
      width: 98%; 
      margin-left: 1%;       
     } 
     #content, #right, #left 
     { 
      height: 100%; 
      overflow-y: auto; 
     } 
     #header 
     { 
      height: 100px; 
      top: 0; 
      background-color: orange; 
     } 
     #main 
     { 
      top: 100px; 
      bottom: 30px; 
      background-color: White; 
     }   
     #footer 
     { 
      height: 30px; 
      bottom: 0px;    
      background-color: #9933FF; 
     }  
     #innerContent  
     { 
      padding: 10px; 
     } 
     #left 
     { 
      float: left; 
      width: 245px;    
      margin-right: 3px; /* Space between content and left div */ 
      background-color: Lime; 
     } 
     #right 
     { 
      float: right; 
      width: 245px;    
      margin-left: 3px; /* Space between content and right div */ 
      background-color: Lime; 
     } 
    </style> 
</head> 
<body> 
    <div id="header">header</div> 
    <div id="main"> 
     <div id="left">Banners Banners Banners Banners Banners 54321</div> 
     <div id="right">Banners Banners Banners Banners Banners 54321</div> 
     <div id="content"> 
      <div id="innerContent"> 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content 1 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content 2 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content Dynamic content Dynamic content Dynamic content Dynamic content 
       Dynamic content 3     
      </div> 
     </div> 
    </div> 
    <div id="footer">footer</div> 
</body> 
</html>

출처

2011-12-02 10:29:01

이 Fiddle

습니까 몇 가지 다른 방법을 시도 ... 내용과 오른쪽 DIV 사이에 내 화면에 약간의 분할을 얻을

난 그냥 샘플의 왼쪽 열을 추가!

html, body { background: #ccc; } 
.wrap { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 20px; 
    overflow: hidden; 
    padding: 20px; 
    min-width:998px; 
} 

.main { 
    margin: 0 220px 0 0; 
} 

.main, .sidebar { 
    background: none repeat scroll 0 0 #EEEEEE; 
    min-height: 100px; 
} 

.sidebar { 
    float: right; 
    height: 200px; 
    width: 200px; 
    background: #eee; 
    min-height: 100px; 
}

출처

2011-12-02 08:29:28

@LockTar 이것은 정확히 당신의 구조이지만, 이것으로 스스로 할 수 있습니다. –

안녕하세요 Sameera, 두 divs를 나란히 얻는 것은 큰 문제가 아닙니다. 문제는 내가 페이지의 나머지 높이가있는 콘텐츠 div와 함께 작동하도록 할 수 없다는 것입니다 ... –

콘텐츠 div 나머지 높이

답변

관련 문제