css 左右の背景が異なる設定方法

質問

下記の１ページだけ、右背景が途中で切れてしまう不具合が出てしまいました。
このような感じです。
http://marimekko2525.web.fc2.com/

設定方法は下記のサイトを参考にして作りました。
http://www.webopixel.net/javascript/517.html

スライドショーが入っている”<div id="cont">”部分に原因があると思うのですが、
改善策が分かりません。。。

どなたか分かる方いらっしゃいましたらアドバイスをお願いします。

cssソース

/*====↓reset.css↓====*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,p,blockquote,th,td { margin:0;padding:0; }

img{
border: 0;
}

/*====↓base.css↓====*/
#cont {
width: 610px;
height: 100%;
position: relative;
margin: 50px auto;
z-index: 70;
overflow: hidden;
}

#works_deta{
clear:both;
margin-top:100px;
margin-bottom:10px;
padding:20px;
background-color:#333535;
}

#works_deta h4,
#works_deta_right h5{
margin-bottom:10px;
}

#works_deta_left{
float:left;
}

#works_deta_right{
float:right;
width:390px;
}

#works_deta_right p{
color:#ffffff;
font-size: 85%;
line-height:1.8em;
}

hr#works_deta_right{
clear:both;
}

p.works_deta{
color:#ffffff;
font-size: 85%;
line-height:1.8em;
text-align:right;
clear:both;
}

#works_deta_right img.back_to_list{
float: right;
}

/*====↓iview.css↓====*/
/* The slider */
.iviewSlider {
overflow: hidden;
}

/* The timer in the Slider */
#iview-timer {
position: absolute;
z-index: 100;
border-radius: 5px;
cursor: pointer;
}

#iview-timer div {
border-radius: 3px;
}

/* The Preloader in the Slider */
#iview-preloader {
position: absolute;
z-index: 1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #000 1px solid;
padding: 1px;
width: 100px;
height: 3px;
}
#iview-preloader div {
float: left;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
height: 3px;
background: #000;
width: 0px;
}

/* The strips and boxes in the Slider */
.iview-strip {
display:block;
position:absolute;
z-index:5;
}
.iview-block {
display:block;
position:absolute;
z-index:5;
}

/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.iview-prevNav {
left:0px;
}
.iview-nextNav {
right:0px;
}

/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
position:absolute;
z-index:9;
}
.iview-controlNav a {
z-index:9;
cursor:pointer;
}
.iview-controlNav a.active {
font-weight:bold;
}
.iview-controlNav .iview-items ul {
list-style: none;
}
.iview-controlNav .iview-items ul li {
display: inline;
position: relative;
}
.iview-controlNav .iview-tooltip {
position: absolute;
}

/* The captions in the Slider */
.iview-caption {
position:absolute;
z-index:4;
overflow: hidden;
cursor: default;
}

/*====↓style.css↓====*/
.container {
display: block;
width: 600px;
margin: 0px auto;
}

#iview {
display: block;
width: 600px;
background: #000;
background: rgba(0, 0, 0, 0.7);
padding: 5px;
border-radius: 5px;
position: relative;
margin: 10px auto;
}

#iview .iviewSlider{
display: block;
width: 600px;
height: 360px;
overflow: hidden;
border-radius: 4px 4px 0px 0px;
}

.iview-controlNav {
position: static;
height: 45px;
text-align: center;
border-radius: 0px 0px 4px 4px;
}

.iview-controlNav .iview-items {
display: block;
padding: 0px 20px;
}

.iview-controlNav a img {
height: 60px;
border: #000 1px solid;
margin: 20px 10px 20px 0px;
border-radius: 2px;
}

.iview-controlNav a.active img {
border-color: #999;
}

#iview-preloader {
border: #666 1px solid;
width: 150px
}

#iview-preloader div {
background: #666;
}

回答No.3

site_study_com · ベストアンサー

No1です。

どうやら#iviewの高さもうまく取れてないみたいですので、css の #iview に高さを指定することはできませんか？例えば

height:405px;

とかでどうでしょう。

お礼

高さを指定したらぶじ反映されました。

お忙しいところ時間を割いていただき
本当にありがとうございました。

回答No.2

site_study_com

no1です。

参考ソースにalertを入れたままでしたので使うときには取ってください。

回答No.1

site_study_com

スライドショーが表示されるよりも先にwrapperの高さを読んじゃってるので

$(window).load(function() {
var h = $('#article').height();
alert(h);
if( $('body').height() < h ) {
$('#left-bg').height(h);
$('#wrapper').height(h);
}
});

としてみてください。

補足

アドバイスありがとうございます。
ソースを差し替えてみましたが、まだ変わらない状態です。