水平滾動條出現 - 均勻Div的寬度= 100％

我一直在試圖通過將div的
設置爲100％來將div適合瀏覽器的工作區域。儘管我在屏幕上獲得了一個垂直和水平滾動條。

HTML：水平滾動條出現 - 均勻Div的寬度= 100％

<html> 
<body> 
<div id="test"> 
</div> 
</body> 
</html>

CSS：

#test{ width:100%; height:100%; background-color:red; } 
body{ margin:0; padding:0; }

我也試圖與腳本，但相同的結果返回。

SCRIPT：

$('#test').css({'width':$(window).width(),'height':$(window).height()});

我一直在測試這跟IE9。任何想法以避免這種情況。？

來源

2012-11-18 Rajaprabhu Aravindasamy

您是否嘗試過使用'html {padding：0;}'？你有沒有嘗試在'body'上設置'overflow：none;'？我目前無法在IE9中測試。 – Frog

溶液中獲得：

的問題是，我忘了指定border屬性爲身體

body{ margin:0; padding:0; border:0;}

現在它的精細，H和V滾動條了消逝的。
任何方式謝謝你們及時的回覆。

來源

2012-11-26 15:09:29

取決於IE版本/怪癖模式，可以是：

$(document).ready(function() { 
     $('#test').css('height', $(window).innerHeight()); 
    });

或

$(document).ready(function() { 
     $('#test').css('height', document.body.clientHeight); 
    });

會工作。你也可以用寬度來做同樣的事情。

$(window).innerWidth(); 
    document.documentElement.clientWidth;

使用您的代碼&我在IE 9中的代碼對我很好。由於它顯然不適合你，我唯一的其他建議是確保沒有其他可能會干擾的邊界/邊界/填充。

<html> 
<head> 
<title>hi</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <style type="text/css"> 
     body{ margin:0; padding:0; } 
     #test{ width:100%; height:100%; background-color:red; } 
    </style> 
</head> 
<body> 
<div id="test"> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#test').css('height', $(window).innerHeight()); 
    }); 
</script> 
</body> 
</html>

來源

2012-11-18 18:23:26 MikeSmithDev

仍然相同的結果。 –

你是在怪癖模式？ – MikeSmithDev

body{ 

    margin:0; 
    padding:0; 

} 

#test{ 

    position:absolute; 
    top: 0px; 
    left: 0px; 
    width:100%; 
    height:100%; 
    border:none; 
    background-color:red; 

}

或

#test{ 

    position:absolute; 
    top: 0px; 
    left: 0px; 
    right:0px; 
    bottom: 0px; 
    border:none; 
    background-color:red; 


}

來源

2012-11-21 10:23:45 Nandhakumar

水平滾動條出現 - 均勻Div的寬度= 100％

回答

相關問題