为什么我的div不全屏？

Question

为什么我的按钮在高度上向下扩展而在顶部和底部不均匀，因此它会覆盖整个屏幕？

并且边界线应该停在父div的大小...我不能让它工作..你有什么想法吗？ （使狗狗消失：DD）

var main = function(){
    $('#Music').click(function(){
        $('#soundcloud').animate({
            bottom:'0px'
        },200);

        $('body').animate({
            bottom:'285px'
        }, 200);

    });

    $('#Home').click(function(){
        $('#title').css("-webkit-text-fill-color", "transparent")
        $('.dick').css("background-image", "url(RegenBack.jpg)")
        $('#soundcloud').animate({
            bottom:'-285px'
        },200);

        $('body').animate({
            bottom:'0px'
            },200);
    });

    $('#button').mouseup(function () {
        var d = {};
        $('#button').removeClass('shadow')
        $('#button').find('p').removeClass('textshadow')
        $('#button').find('p').css("visibility", "hidden")
        $('#button').css("z-index", "999")
        $('#button').removeClass('shadow')
        $('#button').animate({
            width: '100%'
        },500,function() {
            $('#button').animate({
                height: '100%'
            }, 500);
        });

    });



    $('#button').mousedown(function() {
        $('#button').find('p').addClass('textshadow')
        $('#button').addClass('shadow')

    });



};

$(document).ready(main);

.menu{
    overflow: hidden;
    margin-top: 50px;
}

#button p{
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;
    font-size: 100px;
    font-family: mySecondFont;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}
#button{
    background: url(https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg) fixed;
    width: 622px;
    height: 148px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: auto;
    cursor: pointer;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    border-color: white black black white;
    border-radius: 10px;
    -webkit-box-shadow: inset -3px -3px 0px 0px rgba(255,255,255,1);
}

.textshadow{
    background-color: #000000;
    color: transparent;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
}

.shadow {
    -webkit-box-shadow: inset 9px 9px 15px 0px rgba(0,0,0,0.75).inset -2px -2px 15px 0px rgba(255,255,255,1) !important;
    -moz-box-shadow: inset 9px 9px 15px 0px rgba(0,0,0,0.75), inset -2px -2px 15px 0px rgba(255,255,255,1) !important;
    box-shadow: inset 9px 9px 15px 0px rgba(0,0,0,0.75), inset -2px -2px 15px 0px rgba(255,255,255,1) !important;
}

#soundcloud{
    bottom: -200px;  /* start off behind the scenes */
    height: 200px;
    position: fixed;
    width: 100%;
    background-color: #ffffff;
}

div div div div  p{
    border: 5px solid white;
    text-align: center;
    color: #ffffff;
    font-size: 70px;
    font-family: myFirstFont;
    text-decoration: none;
}

div div div div p:hover{
    cursor: pointer;
    border-color: grey;
    text-decoration: none;
    color: grey;
}

#Music {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

#Home {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

#About {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

#Media {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.dick {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(http://www.prevention.com/sites/default/files/imagecache/slideshow_display/dog-dogue-de-bordeaux-puppy-410x290.jpg);
}


#title {
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default;
    overflow: hidden;
    float: inherit;
    background: url(Textur1.jpg) no-repeat fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: mySecondFont;
    font-size: 200px;
    margin-top: 50px;
}


div p{
    text-align: center;
    font-size: 70px;
    color: #ffffff;
}

@font-face {
    font-family: myFirstFont;
    src: url(/Fonts/Bask/BaskOldFace.woff);
}
@font-face {
    font-family: mySecondFont;
    src: url(Fonts/Script/ScriptMTBold.woff);
}

body, hmtl{
    height: 100%;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head lang="de">
        <meta charset="UTF-8">
        <title>Bolle | Music</title>
        <link href="bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet">
        <link href="Bolle%20Music.css" rel="stylesheet">
    </head>
    <body>
    <div class="dick">
        <div id="button">
            <p>Get Happy</p>
        </div>
            </div>

            <div id="soundcloud"></div>
        <script src="jquery-1.11.2.min.js"></script>
        <script src="Ani.js"></script>
    </body>
</html>

我感谢任何提示:) 问候

BOLLE

Answer 1

按钮上的margin-top属性设置为200px。按钮扩展后该属性保持不变。