남은 페이지 높이를 커버하기 위해 div를 확장하는 방법

죄송 합니다만 검색 결과가 많았지 만 내 문제와 정확히 일치하는 것은 없습니다. SO가 div 높이 문제에 빠져있는 것 같습니다. :-( 남은 페이지 높이를 커버하기 위해 div를 확장하는 방법

내가 가지고있는 다음과 같은 테스트 레이아웃 : 나는 1 ~ 3은 상단과 하단에 머물 사업부를 원하는

<!DOCTYPE html> 
<html> 
<head> 
    <title>Div Test</title> 
    <style type="text/css" media="screen"> 
     body { 
      margin:0; 
     } 
     div { 
      width:100%; 
     } 
     .content { 
      position:relative; 
      float:none; 
      margin-left:auto; 
      margin-right:auto; 
      display:block; 
      width:680px; 
     } 
     #one { 
      height:100px; 
      position:relative; 
      background-color:#0000FF; 
     } 
     #two { 
      position:relative; 
      background-color:#00FF00; 
      height:100%; 
      min-height:400px; 
     } 
     #three { 
      height:70px; 
      background-color:#FF0000; 
      bottom:0; 
      position:absolute; 
     } 
     #oneone { 
      height:100%; 
      background-color:#838383; 
     } 
     #twotwo { 
      height:400px; 
      background-color:#EEFF47; 
     } 
     #threethree { 
      height:100%; 
      background-color:#400080; 
     } 
    </style> 
</head> 
<body> 
    <div id="one"> 
     <div class="content" id="oneone"></div> 
    </div> 
    <div id="two"> 
     <div class="content" id="twotwo">Expand this to the bottom.</div> 
    </div> 
    <div id="three"> 
     <div class="content" id="threethree"></div> 
    </div> 
</body> 
</html>

, DIV twotwo 내 pagecontent을 수용하기 위해 높이 확장하고 확장해야 할 때 .?! 함량 따라서 아래 DIV 세를 밀고 스크롤 원인 페이지 높이보다 더

자바 스크립트없이이 가능 그렇다면,이에 대한 CSS 솔루션을 어떻게 높이를 설정하는 방법에 대한 감사

출처

2011-02-18 Jon Lang

자바 스크립트가 필요합니다. 머리말과 꼬리말 높이가 있고 가운데가 100 % 높이가되도록하려면 전체 페이지 높이 + 머리말 높이 + 꼬리말 높이가됩니다. 그러면 전체 페이지를 볼 수있는 스크롤 막대로 끝납니다. 모든 것을 같은 창에 맞추려면 javascript를 사용하여 가운데 공간이 얼마나 남았는지 감지하고 이에 따라 높이를 지정해야합니다.

는

var one = $('#one').height(), 
three = $('#three').height(), 
two = parseInt($(window).height() - three - one); 
alert(two);

을 할 수있는, jQuery를 함께 중간 높이를 감지하려면 이렇게하면 귀하의 경우 <div id="two">입니다 중간 부분 방치 높이를 줄 것이다.

http://jsfiddle.net/Ppw5y/의 jQuery 코드를 참조하십시오. 창을 확장하고 코드를 다시 실행하면 내용 높이가 달라집니다.

출처

2011-02-19 00:46:07 Hussein

흥미 롭습니다. 나는 그것이 CSS로 할 수 없다고 생각한다. 결과를 최소 높이로 설정하면 내용이 페이지를 채우는 데 필요한 높이보다 길면 확장됩니다. 맞습니까? –

또 다른 생각 : CSS3 미디어 쿼리가 페이지 높이에 동적으로 적응할 수 없습니까? 아니면 JS 속임수입니까? –

@jon CSS3는 크로스 브라우저 호환이 아닙니다. – Hussein

은 무엇인가 : 자동; f 또는 #two 및 #twotwo?

출처

2011-02-18 23:54:17 CodeVirtuoso

div가 작동하지 않습니다. div는 콘텐츠만큼 높습니다. 두 div 사이의 공간을 채우고 싶습니다. –

스크립트없이 수행 할 수 있다고 생각합니다. 이 코드를 확인하십시오.

<!DOCTYPE html> 
<html> 
<head> 
<title>Div Test</title> 
<style type="text/css" media="screen"> 
    body { 
     margin:0; 
    } 
    div { 
     width:100%; 
    } 
    .content { 
     position:relative; 
     float:none; 
     margin-left:auto; 
     margin-right:auto; 
     display:block; 
     width:680px; 
    } 
    #one { 
     height:100px; 
     position:relative; 
     background-color:#0000FF; 
    } 
    #two { 
     position:relative; 
     background-color:#00FF00; 
     /*changed*/ 
     min-height:400px; 
    } 
    #three { 
     height:70px; 
     background-color:#FF0000; 
     bottom:0; 
     position:relative; /*changed*/ 
    } 
    #oneone { 
     height:100%; 
     background-color:#838383; 
    } 
    #twotwo { 
     /*changed*/ 
     min-height:400px;/*changed*/ 
     background-color:#EEFF47; 
    } 
    #threethree { 
     height:100%; 
     background-color:#400080; 
    } 
</style> 
</head> 
<body> 
<div id="one"> 
    <div class="content" id="oneone"></div> 
</div> 
<div id="two"> 
    <div class="content" id="twotwo">Expand this to the bottom.</div> 
</div> 
<div id="three"> 
    <div class="content" id="threethree"></div> 
</div>  
</body> 
</html>

코드를 변경 한 곳마다/* changed * /를 추가했습니다.

출처

2011-02-19 01:52:21

아니요, 죄송합니다.이 기능이 작동하지 않습니다. 바닥 글이 더 이상 창 하단에 없습니다. 어쨌든 고마워요! –

남은 페이지 높이를 커버하기 위해 div를 확장하는 방법

답변

관련 문제