Question

一个简单的问题，我有2个div，代码如下（见下文）。我想制作占据屏幕高度和宽度的96％的div（也是最小尺寸），并且它有2％的空白区域（这就是为什么我放2％的余量）。问题是它考虑宽度的2％（以像素为单位）并将该比例与高度相关（因此在我的屏幕中我有33.6px的margin-top，margin-bottom，margin-left.margin-right，而不是2与高度和宽度成比例的百分比。

你知道怎么做吗？我真的不太了解JavaScript，因为我在教自己，我是新手，我知道这可以用它完成，很抱歉，如果这是一个初学者的问题。另外，我将它上传到我的webhost，所以如果你想提供帮助或想要查看它，你不会制作.html文件：

http://shoujo.bigchannel.org/stackoverflow.html

提前致谢，感谢您阅读我的问题

            <style>
            #div1
            {
                position:fixed;
                width:100%;
                height:100%;
                min-width:1020px;
                min-height:780px;
                left:0px;
                bottom:0px;
            }
            #div2
            {
                width:96%;
                height:96%;
                margin:2%;
                background-image:url(background.png);
            }
            </style>
            <div id="div1"><div id="div2"></div></div>

Answer 1

可以通过jQuery轻松解决

http://jsfiddle.net/2qrGN/ （删除了此示例中的min-width＆amp; min-height以使其可见）

将其发布到标题中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ fixLayout() });
$(window).resize(function(){ fixLayout() })

function fixLayout(){
    var targetMargin = $(window).height()*0.02;
  $('#div2').css({marginTop:targetMargin, marginBottom:targetMargin});
}
</script>

当我以％指定边距时，它引用宽度而不是宽度和高度

1 个答案: