가변 높이 2 모듈 사이드 바를 가진 고정 머리말과 꼬리말

고정 바닥 글과 머리말이있는 레이아웃이 있고 "정보 상자"div가 가변 높이이고 "scrolling-div" 오른쪽 열에 나머지 수직 높이를 기입하십시오. this fiddle에서 볼 수 있듯이 scrolling-div의 높이를 100 %로 설정하면 나머지 열이 아닌 오른쪽 열만큼 키가 커집니다.가변 높이 2 모듈 사이드 바를 가진 고정 머리말과 꼬리말

body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 

#header { 
    position:fixed; 
    height:45px; 
    width:100%; 
    background-color:#FF0000; 
    top:0; 
} 

#footer { 
    position:fixed; 
    height:45px; 
    width:100%; 
    background-color: #FF00FF; 
    bottom:0 
} 

#main-container { 
    background:#00FF00; 
    position:absolute; 
    top:45px; 
    bottom:45px; 
    width:100% 
} 

#page-content { 
    width:960px; 
    position:relative; 
    margin: 0 auto; 
    background-color:#FFF000; 
    height:100%; 
} 

#left-column { 
    background-color:#444444; 
    width:400px; 
    height:100%; 
    float:left; 
} 

#right-column { 
    background-color:#0000FF; 
    float:right; 
    width:560px; 
    z-index:10000; 
    height:100%; 
} 

#info-box { 
    width:100%; 
    height:200px; 
    background-color:#0F0F0F; 
    color: #FFFFFF; 
} 
#scrolling-div { 
    background-color:#FFFFFF; 
    height:200px; 
    overflow:scroll; 
}

그리고 다시, link to the fiddle 행동에서 볼 수 :

<body> 
    <div id="header"> 
    </div> 
    <div id="main-container"> 
     <div id="page-content"> 
     <div id="left-column"> 
     </div> 
     <div id="right-column"> 
      <div id="info-box"> 
      This is a variable height div</div> 
      <div id="scrolling-div"> 
       Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> 

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

이것은 CSS입니다 :

이

는 페이지의 HTML입니다.

도움 주셔서 감사합니다.

출처

2013-02-27 Brian Mayer

CSS에서 calc()을 사용하려고 생각했지만 #info-box의 높이가 가변적이라는 것을 깨달았을 때 일부 JS 속임수에 의존해야 할 수도 있습니다. 경우처럼 (이 설정 미래 지향적으로

$(document).ready(function() { 
    $("#scrolling-div").height($("#right-column").height()-$("#info-box").height()); 
});

당신이 원하는 경우 : 부모 컨테이너의 높이를 뺀 형제의 높이로 #scrolling-div의 높이를 설정하기 위해 jQuery를의 간단한 라인을 사용할 수 있습니다 내가 대신 overflow-y: auto를 사용하는 것이 좋습니다

$(document).ready(function() { 
    // Define some variables 
    var $sdiv = $("#scrolling-div"), 
     sibHeight = 0; 

    // Get sum of siblings height 
    $sdiv.siblings().each(function() { 
     sibHeight += $(this).height(); 
    }); 

    // Set own height to parent's height - sum of siblings height 
    $sdiv.height($sdiv.parent().height()-sibHeight); 
});

대신 overflow: scroll를 사용하여 여기에 편집 된 바이올린을 참조

) -: 당신은, 당신은 대신 다음과 같은 기능을 사용할 수 있습니다) 컨테이너에 둘 이상의 형제 자매가

출처

2013-02-27 21:55:05 Terry

감사! 나는 jQuery로 이미 그렇게했다고 말했어야했는데, CSS로 그것을 수행하기를 정말로 바랬다. –

가변 높이 2 모듈 사이드 바를 가진 고정 머리말과 꼬리말

답변

관련 문제