如何使DIV展开以适合位于绝对位置的另一个元素与位于固定位置的另一个元素

时间：2015-12-30 23:39:27

标签： javascript jquery html css

我的页面顶部有一个UL / LI，LI位于＆＃34; relative＆＃34;，包含菜单按钮。

底部的另一个div位于＆＃34; fixed＆＃34;，包含帮助链接，版权，使用条款等。

我之间有一个div，我想伸展到两者之间，以便它在浏览器窗口中调整大小。

CSS：

.content {
    margin-left:1%;
}

ul.sdt_menu {
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:1020px;
}
ul.sdt_menu a {
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li{
    float:left;
    width:170px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.sdt_menu li > a {
    position:absolute;
    top:0px;
    left:0px;
    width:170px;
    height:85px;
    z-index:12;
    background:transparent url(../images/overlay.png) no-repeat bottom right;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
    border:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:170px;
    height:60px;
    z-index:15;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:170px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
    color:#fff;
    font-size:24px;
    float:left;
    clear:both;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0B75AF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:10px;
    letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:340px;
    xoverflow:hidden;
    height:340px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#fff;
}

HTML：

<html>
    <head>

        <title>Employment Application</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>


        <!-- The JavaScript -->
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

        <style>
            body{
                background:#333 url(images/bg.jpg) repeat top left;
                font-family:Arial;
            }

            span.reference {
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:12px;
            }

            span.reference a {
                color:#aaa;
                text-transform:uppercase;
                text-decoration:none;
                text-shadow:1px 1px 1px #000;
                margin-right:30px;
            }

            span.reference a:hover {
                color:#ff2222;
            }

            ul.sdt_menu {
                margin-top:80px;
            }

            h1.title {
                text-indent:-9000px;
                background:transparent url(images/title.png) no-repeat top right;
                width:633px;
                height:69px;
            }
        </style>


        <script type="text/javascript">
            $(function() {
                /**
                * for each menu element, on mouseenter, 
                * we enlarge the image, and show both sdt_active span and 
                * sdt_wrap span. If the element has a sub menu (sdt_box),
                * then we slide it - if the element is the last one in the menu
                * we slide it to the left, otherwise to the right
                */

                $('#sdt_menu > li').bind('mouseenter',function(){
                    var $elem = $(this);
                    $elem.find('img')
                         .stop(true)
                         .animate({
                            'width':'170px',
                            'height':'170px',
                            'left':'0px'
                         },400,'easeOutBack')
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'140px'},500,'easeOutBack')
                         .andSelf()
                         .find('.sdt_active')
                         .stop(true)
                         .animate({'height':'170px'},300,function() {
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},300);
                        }   
                    });
                }).bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');

                    $elem.find('.sdt_active')
                         .stop(true)
                         .animate({'height':'0px'},300)
                         .andSelf().find('img')
                         .stop(true)
                         .animate({
                            'width':'0px',
                            'height':'0px',
                            'left':'85px'},400)
                         .andSelf()
                         .find('.sdt_wrap')
                         .stop(true)
                         .animate({'top':'25px'},500);
                });
            });
        </script>

    </head>

    <body>
        <div class="content">
            <h1 class="title">Employment Application</h1>
            <ul id="sdt_menu" class="sdt_menu">
                <li>
                    <a href="#">
                        <img src="images/AboutUs.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">About Us</span>
                            <span class="sdt_descr">Let's Get Started</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                            <a href="#">About US</a>
                            <a href="#">E-Verify</a>
                            <a href="#">Self Identification (Optional)</a>
                            <a href="#">How'd You Hear About Us? (Optional)</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="images/AboutYou.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">About You</span>
                            <span class="sdt_descr">Just The basics</span>
                        </span>
                    </a>
                    <div class="sdt_box">
                            <a href="#">1. About You</a>
                            <a href="#">2. Education</a>
                            <a href="#">3. Military Service</a>
                            <a href="#">4. Organisations</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="images/3.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">History</span>
                            <span class="sdt_descr">Where You've Been</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/4.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">References</span>
                            <span class="sdt_descr">Applicant Testimonials</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/5.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">Finish</span>
                            <span class="sdt_descr">Few last things and we're done</span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content" style="color:white; margin-top:8px; float:left; width:70%; height:400px; overflow-y:auto; border:1px solid red; ">
            <br>
            <br>
            alskd fjlaksdj flaksdj flaksdj flkasdj flaksdjf lkasjdflkajsdlfk jalskdfj <br>
            alskd fjlaksdj flaksdj flaksdj flkasdj flaksdjf lkasjdflkajsdlfk jalskdfj <br>
        </div>

        <div>
            <span class="reference" style="border:1px solid green;">
                <a href="https://www.asdfasdf/apply/getHelp.html">Need Help?</a>
                <a href="https://www.asdfasdf/apply/termsOfUse.html">Terms of Use</a>
                <a href="">Site Design Copyright &copy; XYZ Company - All Rights Reserved</a>
            </span>
        </div>

    </body>
</html>

可以这样做吗？

CSS解决方案或javascript窗口大小调整事件将会很好，只要它可以完成。

编辑：这是当前结果的图片：

Current state

编辑：这是我在此处找到的优秀代码段的修改，并提示http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

2 个答案:

答案 0 :(得分：0)

确保正文不可滚动

body {
    overflow: hidden;
}

你的页脚是：

bottom: 0px;

制作内容div 

bottom: 20px; // or whatever is perfect
overflow: auto;

页脚将被修复，因为正文不可滚动且内容正确，所以展示位置应始终正确。

您可以改为使用边距滚动您的身体：

margin-bottom: 20px;

你的页脚：

position: fixed;
bottom: 0px;

因此body div会滚动，页脚是静态的。

答案 1 :(得分：0)

如果你想进入JQuery路线，那么获得.sdt_menu的偏移底部以及.reference的偏移顶部的这个示例怎么样，只需要.content的高度调整大小时这两者之间的区别。

$(window).on("resize", function() {

    var top = $('.sdt_menu').offset().top + $('.sdt_menu').outerHeight(true);
    var bottom = $(".reference").offset().top - 23;   
    var content_height = (bottom-top);

    $(".content:nth-child(2)").css("height", content_height); //I use nth-child(2) because you have multiple elements with class `.content`

}).resize() //so it resizes on load

这是一个工作小提琴：https://jsfiddle.net/oez0488h/57/

相关问题
最新问题