Css 调整页面大小时从垂直角度调整元素

调整页面大小时，如何使页面上的元素垂直适合

现在它可以水平工作直到某一点，但是对于具有不同高度方向的设备，我该怎么做呢？如果元素可以动态地调整大小或其他什么的话，那就太好了

下面的代码：

<div id="topPane">
        <h1 id="georgeLogo">Logo</h1>
    <div id="login">
        <div id="facebookLoginButton">Continue with Facebook</div>
        <br class="lb">
        <div class="center">or</div>
        <br class="lb">
        <input type="text" placeholder="Email Address" required>
        <br class="lb">
        <input type="text" placeholder="Password" required>
        <br class="lb">
        <div id="standardLoginButton">Login</div>
        <br class="lb">
        <div id="copyright">© Copyright 2014</div>
    </div>


    <div id="bottomPane">
        <div id="loginPane">Login</div>
        <div id="registerPane">Sign Up</div>
    </div>

标志
继续使用Facebook


或






登录


©版权所有2014
登录
注册

---

jsiddle:

尝试使用媒体查询，例如结合使用

minheight

和

max height

与车窗高度相关的单位，如

vh

，例如：

@media only screen and (max-height: 550px) {
    #georgeLogo {
        font-size: 14vh;
    }
    #login {
        margin-top: 8vh;
    }
    .lb {
        line-height: 4vh !important;
    }
}
@media only screen and (max-height: 400px) {
    #georgeLogo {
        font-size: 14vh;
    }
    #login {
        margin-top: 2vh;
    }
    .lb {
        line-height: 1vh !important;
    }
}

Jsfiddle：

---

更多信息和示例：

看起来您需要一些媒体查询（或javascript）是否要删除元素之间的填充/边距，以便所有项目都能显示在屏幕上？如果是这样，您将需要JavaScript来检测窗口的高度。