Html 使中间砌块高度100%，而垂直相邻砌块高度固定

我想使“阴影重复块”的高度为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-->

像这样

CSS:

    .center{
    margin: 0 auto;
    text-align: center;
    width:50%;
}
.right-shadow{
    float:right;
    background:blue;
}
.left-shadow{
    float:left;
    background:green;
}
.shadow-up{
    height:200px;
    width:100%;
    background:yellow;
}
.shadow-down{
    height:200px;
    width:100%;
    background:red;
}
.right-shadow .shadow-up{
    float:right;
}
.right-shadow .shadow-down{
    float:right;
}

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

HTML:

    .center{
    margin: 0 auto;
    text-align: center;
    width:50%;
}
.right-shadow{
    float:right;
    background:blue;
}
.left-shadow{
    float:left;
    background:green;
}
.shadow-up{
    height:200px;
    width:100%;
    background:yellow;
}
.shadow-down{
    height:200px;
    width:100%;
    background:red;
}
.right-shadow .shadow-up{
    float:right;
}
.right-shadow .shadow-down{
    float:right;
}

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

正确内容
左内容
这里有一些内容

因此，如果我理解你的问题，我相信你会选择三列布局，中间的列始终是其父列的100%，边列可以具有任何高度。为了这个答案，我已经对你的标记进行了大量的抽象，所以你必须把它翻译回去，但它会实现你的目标

HTML

<div class="center">
    <div class="left-shadow">
    </div>

    <div class="right-shadow">
    </div>

    <div class="content">
    </div>
</div>

---

实际上，我们所做的是左右浮动边框，然后在中间框上设置边距，使其不与边重叠。一开始你的头可能有点难缠，但它很结实。由于我们的中间元素现在是一个无浮动块，我们可以轻松地将其设置为100%的高度。同样，可以将侧面设置为您想要的任何高度（或仅设置其内容高度！）。

到目前为止，您尝试过哪种CSS？如果您提供示例代码，请将HTML和CSS分开。很简单，可读性更好。如果我们在“内容”中添加更多内容，“阴影重复”将无法缩放，不幸的是，简单的解决方法是使阴影重复变为清晰：两者都清除，并手动设置高度。如果有时间的话，我今天晚些时候会研究它。问题是，我需要“阴影向上”作为页眉，“阴影向下”——页脚在“右阴影”和“左阴影”中。“阴影重复”应取决于“内容”块的高度