首页 文章

如何用div填充屏幕，然后在屏幕变得太大（达到最大高度）时居中？

提问于
浏览 次
0

目标：

  • 当窗口的宽度和高度都很小时，div应该与窗口的大小相同;

  • 当窗口的宽度太大（> max-width）时，div应将其宽度保持为max-width，并水平居中 .

  • 当窗口的高度太大（> max-height）时，div应保持其高度为max-height， and be vertically centered .

除了最后一点之外，下面的例子已经实现了一切 .

如何在窗口中垂直居中这个div？即，我希望红色区域的行为与绿色区域相似，但只是垂直而不是水平 .

（此设计旨在用于移动设备屏幕的响应式设计 . 如果可能，不参与JS . ）

<!doctype html>
<html>
        <head>
                <style>
                        body,html{
                                height:100%;
                                margin:0px;
                                background:green;
                                }
                        #t1{
                                position:relative;
                                height:100%;
                                max-width:640px;
                                margin:0 auto;
                                background-color:red;
                        }
                        #t1-1{
                                position:absolute;
                                height:100%;
                                max-height:640px;
                                width:100%;
                                background-color:#dddddd;

                                overflow:hidden;/*demo purpose*/
                        }
                        /*the following stuff are for demo only*/
                        img{
                                position:absolute;
                                opacity:0.5;
                        }
                        img.w{
                                width:100%;
                        }
                        img.h{
                                height:100%;
                        }
                </style>
        </head>
        <body>
                <div id="t1">
                        <div id="t1-1">
                                <img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
                                <img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
                        </div>
                </div>
        </body>
</html>

附：在此示例中，某些桌面浏览器在内部将min-width值设置为整个内容（例如Chrome中的400px），禁用div以保持水平缩小 .

vertical-alignment css

3 回答

  • 0

    您可能需要一些小的javascript才能使其正常工作：

    首先，你需要一个 <div> 元素进行布局，所以我称之为 mask ：

    <div id="mask"></div>

    然后，设置样式以填充整个文档，并给出 max-width 和 max-height ：

    <style>
    #mask {
        position: fixed;
        height: 100%;
        max-height: 400px;
        width: 100%;
        max-width: 400px;
        top: 0;
        left: 0;
        background: red;
    }
</style>

    这种风格不执行 centering 工作，所以你需要你的javascript来做，我们有一个 layoutMask 函数来确定div是否应该居中：

    var mask = document.getElementById('mask');
function layoutMask() {
    // here 400 is the same as the max-width style property
    if (window.innerWidth >= 400) {
        mask.style.left = '50%';
        // to ensure centering, this sould be (max-width / 2)
        mask.style.marginLeft = '-200px';
    }
    else {
        mask.style.left = '';
        mask.style.marginLeft = '';
    }

    // the same as width
    if (window.innerHeight >= 400) {
        mask.style.top = '50%';
        mask.style.marginTop = '-200px';
    }
    else {
        mask.style.top = '';
        mask.style.marginTop = '';
    }
}

    最后，将此函数分配给 resize 事件，并立即执行以确保 <div> 在第一次加载时正确放置：

    if (window.addEventListener) {
    window.addEventListener('resize', layoutMask);
}
else {
    window.attachEvent('onresize', layoutMask);
}
layoutMask();

    我在我的Chrome上试过这个，但我支持 position: fixed; 样式，但它应该适用于大多数浏览器 .

    我做了jsfiddle测试 .

    回复于
  • 0

    据我所知， height:100% 是不可能的 . 您需要使用 <center> 将其水平和垂直居中 . 您可能还需要使用边距 . 喜欢：

    margin-top:18%;
margin-left:40%;
    回复于
  • 1

    您可以添加 @media 查询以实现此效果

    @media (min-height: 640px) {
    #t1-1 {
        top: 50%;
        margin-top: -320px;
    }
}

    请参阅JSFiddle进行测试 .

    回复于

相关问题