检测高度变化并调整div的位置？

时间：2015-07-14 19:41:06

标签： javascript html css

有没有办法可以编写javascript来检测浏览器的高度，然后将div相应地移动到浏览器高度的底部？

我想让页脚始终保持在页面底部，因为当我使用CSS时，在使用手机和平板电脑尺寸时往往会有很大的空间。

提前致谢。

编辑：

这是一个小提琴。如果您缩小浏览器，则会在页脚http://jsfiddle.net/4RvWY/14/

下方看到空格

的

的 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Home</title>
        <!--===================================================css links===================================================!-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
        <link href="css/default_style.css" rel="stylesheet" type="text/css" />
        <link href="css/contact_style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <!--===================================================Header===================================================!-->
        <div class="wrapper">
            <div class="headerwrap">
                <div class="social">
                    <aside class="socialfade"> <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
 <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
 <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>

                    </aside>
                    <!--close socialfade!-->
                </div>
                <!--close social!-->
                <div class="header">
                    <div class="logo">
                        <aside class="logofade">
                            <img src="images/logo.png" />
                        </aside>
                        <!--close logofade-->
                    </div>
                    <!--close logo-->
                </div>
                <!--close header!-->
                <div class="menu">
                    <ul class="menutxt">
                        <aside class="menufade">
                            <li><a href="index.html">HOME</a>

                            </li>
                            <li><a href="portfolio.html">PORTFOLIO</a>

                            </li>
                            <li><a href="contact.html">CONTACT</a>

                            </li>
                        </aside>
                    </ul>
                </div>
                <!--close menu!-->
            </div>
            <!--close headerwrap!-->
            <!--===================================================Contact===================================================!-->
            <div class="toptxt">
                <div id="test2">
                    <p class="infotxt">Get in touch...</p>
                </div>
            </div>
            <div class="detailwrap">
                <div class="contact">
                    <img class="move2" class="hover" src="images/me2.png">
                    <p class="text">Luke Babich</p>
                </div>
                <!--close contact!-->
                <div class="contact">
                    <img class="move2" class="hover" src="images/phone.png">
                    <p class="text">+27 72 836 0954</p>
                </div>
                <!--close contact!-->
                <div class="contact">
                    <img class="move2" class="hover" src="images/mail.png">
                    <p class="text">lukerbab@gmail.com</p>
                </div>
                <!--close contact!-->
            </div>
            <!--close detailwrap!-->
            <!--===================================================Footer===================================================!-->
            <div class="footerwrap2">
                <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
            </div>
            <!--close footerwrap!-->
        </div>
        <!--close wrapper!-->
    </body>

</html>

的

的

的 
@charset"utf-8";

/*---------------------------- Body and Default ----------------------------*/
 body {
    margin:0 auto;
    background:#171717;
    font-family:'Roboto', sans-serif;
    color:#CCC;
}
a {
    color:#000;
    transition:300ms;
}
a:hover {
    color:#000;
}
a:link {
    text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
 .wrapper {
    position:relative;
    width:100%;
}
/*---------------------------- Header ----------------------------*/
 .header {
    position:relative;
    min-height:180px;
    height: 100%;
    padding-right:225px;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-box-shadow: 0px 10px 20px 0px #333;
    -webkit-box-shadow: 0px 10px 20px 0px #333;
    box-shadow: 0px 10px 20px 0px #000;
    z-index:200;
}
.logo {
    position: absolute;
    min-width:60px;
    top:4%;
}
.logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.social {
    position: absolute;
    width:100%;
    min-width:20px;
    top:15px;
    right:1%;
    z-index:500;
}
.social img {
    float:right;
    width:35px;
    display: block;
    padding:0 0 0px 15px;
}
img.move {
    bottom:0px;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
 .menu {
    position:absolute;
    width:100%;
    top:200px;
    z-index:401;
}
ul {
    margin: 0 auto;
    padding:0 0 5px 0;
    list-style-type: none;
}
li {
    display: inline;
    list-style:none;
    padding:1%;
    transition: all 300ms;
}
li a {
    color:#CCC;
    transition:300ms;
}
li a:hover {
    color:#900;
}
.menutxt {
    text-align: center;
    font-family:'Raleway', sans-serif;
    font-size:1.8vw;
    font-weight:400;
    z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
 .foottxt {
    width:100%;
    text-align: center;
    background:#070707;
    font-family:'Roboto', sans-serif;
    padding:15px 0;
    font-size:0.7em;
    color:#FFFFFF;
    font-weight:200;
    margin: 0;
    box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/

/*---------------------------- Logo Fader ----------------------------*/
 .logofade {
    animation: logofadein 3s;
    -moz-animation: logofadein 3s;
    /* Firefox */
    -webkit-animation: logofadein 3s;
    /* Safari and Chrome */
    -o-animation: logofadein 3s;
    /* Opera */
}
}
@keyframes logofadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes logofadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes logofadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes logofadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*---------------------------- menu Fader ----------------------------*/
 .menufade {
    opacity:0;
    animation: menufadein forwards 3s 1s;
    ;
    -moz-animation: menufadein forwards 3s 1s;
    /* Firefox */
    -webkit-animation: menufadein forwards 3s 1s;
    /* Safari and Chrome */
    -o-animation: menufadein forwards 3s 1s;
    /* Opera */
}
}
@keyframes menufadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes menufadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes menufadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes menufadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/*---------------------------- social Fader ----------------------------*/
 .socialfade {
    opacity:0;
    animation: socialfadein forwards 3s 0.5s;
    ;
    -moz-animation: socialfadein forwards 3s 0.5s;
    /* Firefox */
    -webkit-animation: socialfadein forwards 3s 0.5s;
    /* Safari and Chrome */
    -o-animation: socialfadein forwards 3s 0.5s;
    /* Opera */
}
}
@keyframes socialfadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes socialfadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes socialfadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes socialfadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
@charset"utf-8";

/*---------------------------- Content ----------------------------*/
 .toptxt {
    margin-top:130px;
    width:100%;
}
/*.contactwrap{
    width:100%;                 change back if cant figure it out
    margin-top:60px;
}*/
 .detailwrap {
    margin-top:100px;
    width:100%;
    text-align: center;
    /* center align .contacts */
}
/* clearfix */
 .detailwrap:after {
    content:"";
    display: table;
    clear: both;
}
.infotxt {
    text-align: center;
    font-family:'Raleway', sans-serif;
    font-size:2em;
    font-weight:400;
}
.contact {
    display: inline-block;
    /* make it possible to use text-align */
    width: 15%;
    min-width: 180px;
    /* avoid 15% being making the contacts less than 115px */
    margin: 4% 1% 10% 0;
}
.contact img {
    width: 90px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    /*bring back if needed*/
    height: auto;
    /*bring back if needed*/
}
.contact .text {
    top:-15px;
    text-align:center;
    visibility:hidden;
}
.contact:hover .text {
    animation: fadein 2s;
    visibility:visible;
}
img.move2 {
    bottom:0px;
    transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    -webkit-transform: translate(-2px, -2px);
    transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
 .footerwrap2 {
    position:absolute;
    width:100%;
    z-index:501;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
 #test2 p {
    animation: fadein 5s;
    -moz-animation: fadein 5s;
    /* Firefox */
    -webkit-animation: fadein 5s;
    /* Safari and Chrome */
    -o-animation: fadein 5s;
    /* Opera */
    transition: opacity 5s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

的

4 个答案:

答案 0 :(得分：1)

CSS应该足够了。你试过position: absolute; bottom: 0px了吗？ （别忘了在父元素上设置position: relative;

答案 1 :(得分：1)

这是CSS表格布局解决方案。只需将以下样式添加到样式表中即可。

在表格布局中，默认情况下，表格行/行将自动扩展到整个表格的最大可用高度。如果我们将所有容器设置为height:100%，则允许底行始终位于页面底部。

html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    height: 100%;
}
.headerwrap, .toptxt, .detailwrap, .footerwrap2 {
    display: table-row;
}
.detailwrap {
    height: 100%; /*push other rows to their minimal height*/
}

注意，必须删除.footerwrap2{position:absolute;}和相关的样式。

已更新 - http://jsfiddle.net/4RvWY/17/

答案 2 :(得分：0)

window.innerHeight属性给出了可用的窗口高度。也就是说，空间从上到下，减去工具栏等。

然后使用element.style.top = innerHeight value将div设置为适当的位置。从innerHeight值减去一个数量，从窗口底部给出一些空间。

答案 3 :(得分：0)

如果我的想法正确，这应该会有所帮助：

HTML 

<div class="wrapper">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>

CSS 

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: table;
  height: 100%;
  width: 300px;
  margin: 0 auto;
}
.content {
  display: table-row;
  height: 100%;
  background-color: yellow;
}
.footer {
  height: 50px;
  background-color: red;
}
.header {
  height: 50px;
  background-color: lightblue;
}

JSFiddle - 尝试调整窗口大小。

相关问题
最新问题