Question

我左边有一个仪表板类型页面，我有标签＆amp;我有相应标签的内容。我正在使用bootstrap所以我为tab＆amp; amp做了2列1另外它的内容但我的问题是标签的边框没有覆盖内容的整个高度我希望它覆盖整个高度所以我写了一个jquery将设置最后一个标签的高度（＆＃34;＃ws＆＃34;）但这仅适用于页面加载而非点击按钮。

TLDR

1）转到http://kwebmakerusa.com/whp/v3/dashboard.html

2）你能看到标签的右边界，它的高度与右边的内容相同

3）点击任何其他标签，例如：地址簿。注意高度缩小

我要做的是保持高度与右侧的内容相同

这是我的HTML：

 <div class="col-md-2 col-sm-3 hidden-xs nopadding">
    <div id="dtnavs">
    <div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
    <div class="col-md-12 tabtxt" id="cartt">My Cart</div>
    <div class="col-md-12 tabtxt" id="addresst">Address Book</div>
    <div class="col-md-12 tabtxt" id="ordert">My Orders</div>
    <div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
    <div class="col-md-12 tabtxt" id="newst">Newsletters</div>
    </div>
    <div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamicaly-->
  </div>

点击

  $("#addresst,#mtab3").click(function() {
    $('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
    $('#addtab').slideDown(500);
    $(".dashnav").find(".active").removeClass("active");
    $(this).addClass("active");    
    setwsheight("#addtab");
    $(".ccatname,#bcactive").text("Address Book");
    console.log(this);
    return false;
});

setwsheight（）;

function setwsheight(sh){
    $('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
    var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
    console.log(str);
    console.log(sh+" height : "+$(sh).height());
    console.log("dtnavs height : "+$('#dtnavs').height());
    console.log("WS height :" +$('#ws').height());
};

Answer 1

没有jquery
我已经更改了一些你的HTML代码

在内容标签left40

中删除此课程

将此css应用于您的内容端父内容，例如col-md-10 col-sm-9 col-xs-12 nopadding

.selector {
    border-left: 1px solid #ccc;
    margin-left: -1px;
    padding: 0 0 0 40px;
}

应用此css标签内容col-md-2 col-sm-3 hidden-xs nopadding

.selector{
    background: #fff none repeat scroll 0 0;
    position: relative;
    z-index: 999999;
}

Answer 2

试试这个。

var newHeight=your calculation;
$('#ws').animate({
   height:newHeight+"your unit"
},yourDelay,function(){});

此外，如果仍然无效，请尝试在CSS文件中将#ws元素的position属性设置为绝对值，以及此答案中发布的代码。

按钮点击

2 个答案: