jquery - 在窗口底部浮动页面，同时保持相对位置 div

Question

有人帮助我实现了一个网站，其中我有一个中心 div，它被左侧、右侧、底部和顶部的 div 推出屏幕。尝试单击右左眼以获取示例。页面结构如下：

HTML

    <div id="fullContainer">

        <div id="right">

        </div>
        <div id="left">

        </div>  
        <div id="top">

        </div>
        <div id="bottom">

        </div>
    </div>


<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content" class="center">

        </div>
    </div>
</div>

CSS

        body{
            margin:0;
            padding:0;
            overflow:hidden;
        }
        #centerContainer {
            width:50%;
            margin:0 auto;
            height:0;
        }
        #relativeContainer {
            position:relative;
        }
        #fullContainer {
            background-color:#c6421f;
            position:fixed;
            width:100%;
            height:100%;
            bottom:0;

        }
        #content {
            margin: 0 auto;
            position:relative;
            left:0;
            -webkit-transition: all 0.9s ease;
            -moz-transition: all 0.9s ease;
            -o-transition: all 0.9s ease;
            transition: all 0.9s ease;
        }
        #content.right {
            left:-1150px;
        }
        #content.left {
            left:1150px;
        }
        #content.bottom {
            top:-300px;
        }
        #content.top {
            top:1100px;
        }

        #content div {
            cursor:pointer;
        }
        #header{
                opacity:0.6;
                color: beige;
                font-family: 'Dosis',sans-serif;
                font-size: 42px;
                font-weight: bold;
                margin: 0 auto;
                text-align: center;     
        }
        #left {
            padding:0;
            margin:0;
            position:absolute;
            top:0;
            left:-1800px;
            height:100%;
            width:1750px;
            -webkit-transition: all 0.9s ease;
            -moz-transition: all 0.9s ease;
            -o-transition: all 0.9s ease;
            transition: all 0.9s ease;
        }

        #left.opened {
            left:0;
        }
        #left-content{
            margin-left:70px;
            position:relative;
            -webkit-transition: all 0.9s ease;
            -moz-transition: all 0.9s ease;
            -o-transition: all 0.9s ease;
            transition: all 0.9s ease;
        }

        #right {
            padding:0;
            margin:0;
            position:absolute;
            top:0;
            right:-1800px;
            height:100%;
            width:1800px;
            overflow:auto;
            -webkit-transition: all 0.9s ease;
            -moz-transition: all 0.9s ease;
            -o-transition: all 0.9s ease;
            transition: all 0.9s ease;



        }

        #right.opened {
            right:0;
        }
        #resume img{
            float: right;
            margin:0 auto;
            width:50%;

        }


        #top {
            padding:0;
            margin:0;
            position: absolute;
            left: 0;
            top: -1100px;
            width: 100%;
            height: 1000px;
            background: #c6421f;
            -webkit-transition: all 0.9s ease;
            -moz-transition: all 0.9s ease;
            -o-transition: all 0.9s ease;
            transition: all 0.9s ease;

        }
        #top.opened {
            top:0;
        }
        #bottom {
            padding:0;
            margin:0;
            position:absolute;
            left:0;
            bottom:-125px;
            width:100%;
            height:100px;
            background:red;
            border:1px solid #444;
            -webkit-transition: all 0.9s ease;
            -moz-transition: all 0.9s ease;
            -o-transition: all 0.9s ease;
            transition: all 0.9s ease;
        }
        #bottom.opened {
            bottom:0;
        }

我的问题是如何修改它以使内容 div 沉入页面底部。我尝试的一切似乎都使网页的另一部分功能不正确。

这是实际页面：http ://www.uvm.edu/~areid/homesite/ - 它位于我屏幕的底部，但在更大的屏幕上它开始浮动到顶部

Answer 1

添加/更改您的#content div以具有：

position: fixed;
bottom: 0;

并删除 left:0;

我相信这就是您正在寻找的效果。