0

左、右、下、上の div によって画面の外に押し出される中央の div がある Web サイトの実装を誰かが手伝ってくれました。例を得るために右左目をクリックしてみてください。ページの構成は次のとおりです。

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/ - 画面の下部に表示されますが、大きな画面では上部に浮き始めます

4

1 に答える 1

1

#content div を次のように追加/変更します。

position: fixed;
bottom: 0;

left:0; を削除します。

それがあなたが求めている効果だと思います。

于 2012-11-05T19:42:24.447 に答える