固定頁眉和頁腳與可變高度的雙模塊側欄

我有一個固定頁腳和頁眉的佈局，我想要的是「信息框」div是可變高度，並有「滾動div」填充右列中剩餘的垂直高度。從this fiddle可以看到，如果我將滾動div的高度設置爲100％，它將變成與右列一樣高，而不是剩餘空間。固定頁眉和頁腳與可變高度的雙模塊側欄

這是頁面的HTML：

<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：

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看到它在行動。

感謝您的幫助！

來源

2013-02-27 Brian Mayer

你可能需要依靠一些JS技巧來做到這一點 - 我想在CSS中使用calc()，但是意識到#info-box將是高度可變的。您可以使用jQuery的一個簡單的線條來設置#scrolling-div高度爲其父容器的高度減去其兄弟的高度：

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

如果你想面向未來的這個設置（例如，如果你必須在容器中多個兄弟姐妹），你可以使用下面的函數：

$(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而且，我建議使用overflow-y: auto代替;）

看到這裏編輯的小提琴 - http://jsfiddle.net/teddyrised/2qXZG/

來源

2013-02-27 21:55:05 Terry

謝謝！我應該說我已經用jQuery完成了它 - 但我真的希望用CSS完成它:(。 – 2013-02-27 21:57:51

固定頁眉和頁腳與可變高度的雙模塊側欄

回答

相關問題