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

标签 javascript html css

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

我想让页脚始终位于页面底部，因为当我使用 CSS 执行此操作时，在转到手机和平板电脑尺寸时往往会有很大的空隙。

提前致谢。

编辑:

这是一个 fiddle 。如果将浏览器缩小，您会在页脚下方看到空格 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;
    }
}

最佳答案

这是 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/

关于javascript - 检测高度变化并调整 div 的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31415849/

上一篇：javascript - Ajax 测试(wordpress)

下一篇：javascript - Meteor - .html 中的 If 语句

相关文章：

javascript - 如何从组中获取翻译属性？

javascript - Three.js raycaster.intersectObject 当 THREE.Points 只有 1 个顶点或顶点排列成直线时不相交

jquery-ui - 在表格单元格内存储和访问 div 的数据

android:textview中的html，链接可点击

javascript - JQuery CSS 两个值

html - 为什么这个类在单独的文件中不起作用？

javascript - 如何过滤Json对象？

javascript - 当 td 类为多个时显示/隐藏选择选项

javascript - 滚动时更改 bootstrap 3 导航栏的颜色

javascript - 如何在表格行之间显示元素？

©2024 IT工具网  联系我们