html - 垂直の隣接ブロックが固定されている間、中央のブロックの高さを 100% にする

Question

「シャドウリピートブロック」の高さを100％にしたいのですが、「シャドウアップ」は上に、「シャドウダウン」は下に、両方とも高さを固定します（例：200px）

<div class="center">
    <div class="right-shadow">
        <div class="shadow-up"></div>
        <div class="shadow-repeat"></div>
        <div class="shadow-down"></div>
    </div>
        <div class="content">
        </div><!--content-->
    <div class="left-shadow">
        <div class="shadow-up"></div>
        <div class="shadow-repeat"></div>
        <div class="shadow-down"></div>
    </div>
</div><!--center-->

今のところ、正しい結果が得られません。正しい方法があれば、助けてください。

.left-shadow{
    width: 22px;
    float: left;
    position: absolute;
    left: -22px;
    top:0px;
    height: 100%;
}
.right-shadow .shadow-up{
    background: url('img/shadow-part-one.png') no-repeat -22px 0px transparent;
    height: 257px;
}
.right-shadow .shadow-repeat{
    height: 100%;
    background: url('img/shadow-part-two.png') repeat-y -22px 0px transparent;
}
.right-shadow .shadow-down{
    background: url('img/shadow-part-three.png') repeat-y -22px 0px transparent;
    height: 260px;
}
.center{
    margin-right: 20px;
    margin-left: 20px;
    position: relative;
    float: left;
}

.content{
    float: left;
    width: 1100px;
}