Question

我花了3到4个小时试图了解如何在HTML页面中获得一个必须不可滚动的“对称”DIV。

DIV必须在窗口四周都有相同的边距，并且必须包含一个IMG，其大小应根据保持其比例的窗口大小进行缩放。

在following link你可以找到我能做的最好的事情。

正如你所看到的那样，DIV在左侧，顶部和右侧尺寸上有正确的边距，但在底部没有！为什么不？ DIV风格有问题吗？

<div style="margin: 50px;">

我希望非常清楚，谢谢你的帮助！：）

编辑：因为在JSFiddle上它没有显示应该是我刚刚上传了一张关于我在浏览器上获得的图片：

enter image description here

编辑2：这是最后一个工作解决方案的link，感谢大家的帮助，特别是dcardoso。：）

Answer 1

由于您overflow: hidden; html和body使用了Ext.WindowMgr.getActive().query('button[text=ok]')[0].fireHandler();，因此页面正在被删除。

在jsfiddle样式中添加样式标记时，它无法正常工作。滚动是可见的。

Answer 2

啊，我想我得到你所说的。如果页面长于div，则底部的空间大于50px边距。

这里有几个选择，这只是其中之一。

我正在使用calc（）计算100％宽度/高度减去每侧50px。

     html, body {
        margin: 0px;
        overflow: hidden;
    }
    .maxSizeElement {
        width: calc(100vw - 100px);
        height: calc(100vh - 100px);
        margin: 50px;
    }

/* OR YOUR COULD USE...  */

    .maxSizeElement {
      position: absolute;
      width: 85vw;
      height: 85vh;
      top: 0;
      right: 0;
       left: 0;
       bottom:0;
       margin:auto;
    }



    <body>
        <div>
            <img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
        </div>
    </body>

Answer 3

你应该添加到你的身体和html标签（在jsfiddle中不起作用）并删除'overflow：hidden'：

position: relative;
height: 100%;

和你的div标签（删除'margin：50px'）：

box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;

强制DIV在所有方面具有相同的边距

3 个答案: