このコードでいくつかの問題に直面しています。私はあなたが私を助けることができるかもしれないと思った.
まず、私のセクションにはパディングも境界線もないため、ピクセルは上、左、右、および幅のプロパティにのみ使用され、outerWidth() は必要ありません。
最初の問題: 最初に、ボディの「左」と「右」のプロパティを (window_width - 1100 = 180) に設定したので、ボディの幅は 920px です。問題は、そうではないということです。904 になります。chrome と mozilla でテストしました。 欠けている 16 個のピクセルがどこにあるのかわかりません。
2番目:ウィンドウのサイズを変更するときにボディを中央に配置し、ボディがウィンドウ全体を占有するまで余白を小さくします。
私の体は中心にとどまらず、余白の 1 つだけが小さくなります。
「#content」、「#mainContent」、「aside」には幅があるため、これが起こっていることがわかりました。その幅を設定する必要があります。jquery を使用してウィンドウを中央に配置し、上記のすべてのことを行う方法はありますか?
これが私のコードです：
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body{
position:absolute;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;
window_h = $(window).height();
window_w = $(window).width();
top = window_h - (window_h - 100);
left_right = window_w - 1100;
content_w = window_w - 2*left_right;
$('#content').css('width', content_w);
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
resize_body(top, left_right, left_right);
//next three lines are written only for demonstration purpose
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
alert('body width: '+$('body').css('width'));//it supposed to be 920
alert('left propery value: '+left_right);//it supposed to be 180
$(window).resize(function(){
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
resize_body(top, left_right, left_right);
});
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>