CSS：底部：0但是頂部相對

-2

我似乎無法讓我的搜索條件找到我的答案。CSS：底部：0但是頂部相對

我有一個postion:fixed;div，它填補了頁：bottom 5px; top: 5px right: 5px; width 300px; 裏面我有 -

標籤部分的變化（高度）
中心部分（基本相同的高度）
底部（是一個日誌，它會改變）

我想在底部定位日誌。但我希望它是相對於中心內容，所以當標籤部分改變高度時，底部部分將縮小並在必要時滾動。

<div id="rightc" class="fr"> 

<!-- Top Section --> 
<h3>Admin Functions</h3> 
    <ul class="tabs"> 
     <li><a href="#Payment">Payment</a></li> 
     <li><a href="#Fees">Fees</a></li> 
     <li><a href="#Payoff">Payoff Request</a></li> 
     <li><a href="#Close">Close</a></li> 
    </ul> 

<div class="tab_container"> 
    <!-- tab divs are here and the height changes depending on the tab (jquery)--> 
</div> 

<!-- Center Section --> 
<h3>Loan Summary</h3> 
<ul> 
     <!-- small list of items doesnt change --> 
</ul> 

<!-- Transaction log --> 
<h3>Payments & Fees Log:</h3> 
<div id="payments"> 
     <!-- log items here --> 
</div>

來源

2011-12-03 Robert

'bottom：0'是絕對的，所以它不能是相對的。你能說一些你的問題好一點嗎？我不確定你在問什麼。 – Blender

顯示一些示例代碼plz –

我明白了。想象一下。我想讓底部對齊在中間部分下方並將底部對齊到父級。因此，當標籤部分增長時，底部部分縮小並在必要時滾動。 – Robert

我可以想象你需要一個javascript函數這是一個極其醜陋的例子

<div class="tab_container" id="foo">

把這個頭部或.js文件

function bar(){ 

    var i = initial height of your tab container 

    var x = document.getElementById('foo').offsetHeight 

    var y = document.getElementById('payments').offsetHeight 

    if(x>i){ 
    var z= x-i; 
    var a = y-z; 
    document.getElementById('payments').height="'a'+'px'"; 
    } 
}

和只需在您的標籤容器展開的方法中調用此函數，並使用分隔符爲付款標籤展開時評分。

[編輯]

工作大致，我加了另一個IF當選擇這些其他標籤爲。修復：（style.height）

  function divHeight(){ 
       var container_height = 100; 
       var payments_height = 247; 
       var x = document.getElementById('food').offsetHeight; 
       var y = document.getElementById('payments').offsetHeight; 

       if(x > container_height && y == payments_height){ 
        var z = x - container_height; 
        var a = y - z + "px"; 
        document.getElementById('payments').style.height = a ; 
       } 

       if(x < container_height){ 
        var a = payments_height - 12 + "px"; 
        document.getElementById('payments').style.height = a ; 
       } 
      }

瀏覽器窗口檢測和處理盒子模型怎麼樣？

（-12是處理5px的pad和1px邊框）

來源

2011-12-04 02:49:17 SemicolonExpected

CSS：底部：0但是頂部相對

回答

相關問題