Question

我似乎无法使用我的搜索字词来找到答案。

我有一个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>

Answer 1

我想你需要一个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打击垫和1px边框）

CSS：底部：0但顶级相对

1 个答案: