Question

这个小提琴......

显示我想要实现的布局。我希望从标签底部的垂直条延伸到页脚。

这是我需要完成的......

在初始状态下，不显示任何内容，垂直条正确向下延伸到页脚。垂直条应始终延伸到页脚。
当您切换要显示的内容时，请注意垂直条不会延伸到页脚。垂直条需要延伸到页脚。
我想在不使用任何图像黑客的情况下完成此任务。

有没有办法改变这个小提琴，以便垂直条总是延伸到页脚，无论是否有内容拉伸父级？

HTML

<div class="wrapper">
    <div class="header">HEADER</div>
    <div class="body">
        <ul class="nav nav-tabs" id="tabcontrol">
            <li class="active"><a href="#home" data-toggle="tab">Home</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="home" style="">
                <div class="navigation" style="">navigation
                    <br />navigation
                    <br />navigation
                    <br />
                </div>
                <div class="content">
                    <button id="toggle">Toggle Content</button>
                    <div id="theContent" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue odio quis libero dapibus ut tincidunt lectus vestibulum. Donec quis ligula tortor. Sed adipiscing tempor elit, at porttitor lacus luctus ut. Suspendisse suscipit, orci bibendum tincidunt venenatis, lorem ligula aliquet felis, in fringilla diam velit eu sapien. Aliquam vitae varius lacus. Nullam cursus nibh at leo varius vestibulum. Maecenas cursus dui quis metus hendrerit a lacinia est eleifend. Donec pharetra pharetra libero, non tincidunt magna fringilla in. Nulla convallis ornare dui, sed vestibulum turpis rutrum vestibulum. Duis convallis, eros nec vulputate congue, velit elit scelerisque purus, ut ultricies eros felis ac justo.</div>
                </div>
            </div>
        </div>
    </div>
    <div class="push"></div>
</div>
<div class="footer center">
    <div style="border-bottom: 2px solid rgb(174, 174, 201); background-color: #fff;"></div>
    <div>FOOTER</div>
</div>

CSS

.body {
    border: 1px solid rgb(174, 174, 201);
    border-top: 5px solid rgb(174, 174, 201);
    border-bottom: 5px solid rgb(174, 174, 201);
    border-left: 2px solid rgb(174, 174, 201);
    border-right: 2px solid rgb(174, 174, 201);
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px auto;
    /* the bottom margin is the negative value of the footer's height */
    overflow: hidden;
}
.footer {
    height: 50px;
    background-color: red;
}
.footer, .push {
    height: 50px;
    /* .push must be the same height as .footer */
    clear: both;
}
form {
    height: 100%;
}
/* Sticky Footer by Ryan Fait (http://ryanfait.com/) */
.navigation {
    float: left;
    width: 150px;
    border-right: 3px solid rgb(174, 174, 201);
    padding-top: 10px;
    white-space: nowrap;
    position:absolute;
    bottom:50px;
    top:65px;
}
.content {
    padding-top: 10px;
    margin-left:160px;
}
.nav {
    margin-bottom: 0px;
}

JAVASCRIPT

<script>
$(document).ready(function(){
    $('#toggle').click(function () {
        $('#theContent').toggle();
    });
});
</script>

Answer 1

JS是一个选择吗？我一直这样做：

在导航和内容div中添加ID

$('#toggle').click(function () {
    $('#theContent').toggle(0,function(){
        $('#navigation').height($('#content').height());
    });
});

需要一点时间为你工作，例如在隐藏文本时找到最小高度并拾取窗口调整大小事件并进行相应调整，但它应该适合你。

强制垂直条始终触摸页脚的布局

1 个答案: