2011-09-03 71 views
1

一個簡單的問題,我有2個div,下面的代碼(見下文)。我想製作一個佔據屏幕高度和寬度96%的div(最小尺寸也是),它具有2%的空白空間(所以這就是爲什麼我要放2%的餘量)。問題在於它以像素爲單位考慮寬度的2%,並將該比例也考慮到高度(所以在我的屏幕中,我有33.6px margin-top,margin-bottom,margin-left。margin-right,而不是2 %與高度和寬度成比例)。當我用%指定邊距時,它指的是寬度而不是寬度和高度

你知道如何使它工作嗎?我真的不太瞭解JavaScript,因爲我正在自學,而且我對這一點很陌生,我知道如果這是一個初學者問題,可以用它來完成這件事。另外,我上傳到我的虛擬主機,所以你如果你想幫助不要讓一個.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> 

回答

0

它可以通過jQuery的迎刃而解

http://jsfiddle.net/2qrGN/ (除去最小寬度&最小高度在這個例子中,以便它的可見)

將其貼到標題中:

<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>