【jQuery】要素を合わせた横幅の取得について

質問

現在、要素が横並びになった横スクロールのサイトを作成中です。
各コンテンツ要素のsectionの横幅は固定ではなく、
縦幅に合わせて可変するようにしています。

htmlは以下のようにしています。

<div id="wrap">
<div id="header">
<ul><li></li></ul>
</div>

<div id="secWrap">
<div class="section">
ここに内容
</div>
<div class="section">
ここに内容
</div>
</div>
</div>

wrapにsectionの幅を足した合計の横幅（px）を加えたいのですが、
正しいサイズを取得できず、sectionがカラム落ちしてしまいます。

以下のjsの何かが間違っているのでしょうか？
それともCSSなどで何かしらの指定が必要なのでしょうか。
お分かりの方がおられましたらご教授頂けたら幸いです。

■javascript

$(function(){
　　　function adjust(){

var h = $(window).height();
var h1= $('#header').height();
$('.section').css('height', h-h1);

var cont = $('.wrap');//コンテンツの横サイズ
var contW = $('.section').outerWidth(true) * $('div',cont ).length;

cont.css('width', contW);
var speed = 50;

$('html').mousewheel(function(event, mov) {
$(this).scrollLeft($(this).scrollLeft() - mov * speed);
$('body').scrollLeft($('body').scrollLeft() - mov * speed);
return false;
});
}

adjust();

$(window).on('resize', function(){
adjust();
})
});

■CSS

body { height: 100%; overflow-y: hidden;}
html{height: 100%; }

#header{
position: fixed; height: 50px; left: 0px; top: 0px;}

.wrap{
top: 50px; position:absolute; height:100%; }

.section { float:left; }

回答No.1

Hanagefactory · ベストアンサー

> var cont = $('.wrap');//コンテンツの横サイズ
> var contW = $('.section').outerWidth(true) * $('div',cont ).length;

上の２行がわかりませんね。

> var cont = $('.wrap');//コンテンツの横サイズ
これは $('#secWrap') ですかね？

> var contW = $('.section').outerWidth(true) * $('div',cont ).length;
$('.section').outerWidth(true)って一番最初のしかとれてない気がします。
$('div',cont ).length は.sectionの中にdivタグがあっても取得してしまいます。

なので、
var contW = 0;
$('#secWrap').children(".section").each(function(){
contW += $(this).outerWidth(true);
});
のようにして個々のdivを足していく必要があるのではないでしょうか？

お礼

すみません、コンテンツ幅を多めにCSSで設定したところうまく動作しました！
ありがとうございました！

補足

ご回答いただきありがとうございます！！

少しコードをいじっておりますが、
下記の要素に
var cont = $('.wrap,body');//コンテンツの横サイズ
bodyを追加したところ、カラム落ちはしなくなったのですが、
bodyタグにsectionを合わせた合計幅よりも長いwidthのpxが付き、
一番最後のコンテンツの右に空白が出来てしまい必要のないスクロールがついてしまいました。

Hanagefactoryさんから教えてもらった事を参考に、

var contW = $('.section').outerWidth(true) * $('div',cont ).length;の一行を消去し、

下記のようにかいてみたのですが、横幅をうまく取得できませんでした。。
初歩的なミスかと思いますが、どのようにかけば、うまく動きますでしょうか。
お手数おかけいたしますが教えて頂けたら助かります。。

$(function(){
　　　function adjust(){
var h = $(window).height();
var h1= $('#header').height(); //他要素の高さ
var p1= $('#subHead').height(); //他要素の高さ
$('.section,.#secWrap').css('height', h-h1-p1); //可変部分の高さを適用

var cont = $('.wrap');//コンテンツの横サイズ
var contW = 0;
$('#secWrap').children(".section").each(function(){
contW += $(this).outerWidth(true);
});
cont.css('width', contW);
var speed = 50;

$('html').mousewheel(function(event, mov) {
$(this).scrollLeft($(this).scrollLeft() - mov * speed);
$('body').scrollLeft($('body').scrollLeft() - mov * speed);
return false;
});
}
adjust();
$(window).on('resize', function(){
adjust();
})
});