Question

我想让“阴影重复块”高度为100％，而“阴影向上”与顶部对齐，“阴影向下”对齐到底部，两者都是固定高度，例如200像素

<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;
}

Answer 1

喜欢这个？

<强> 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;
}

<强> HTML：

<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-->

Answer 2

所以，如果我理解你的问题，我相信你会选择三列布局，其中中间列始终是其父级的100％，侧栏可以采用任何高度。我已经为这个答案大量抽象了你的标记，所以你将不得不将其翻译回来，但它会实现你的目标。

<强> HTML

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

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

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

请注意，两个阴影div已在内容区域的顶部移动。我们将把阴影向左和向右漂浮，有效地将它们从流中移除（无论如何，为了我们的目的）。浮动元素不像普通块元素那样 pushy ;它们有一个位置，但是其他块元素不会被它们向下推到页面上（内联元素是一个不同的故事）。浮动元素可以，但是可以被现有的块元素推送，因此我们希望将它们声明在内容区域之上，否则会将它们推下来。

<强> CSS

.center
{
    padding: 20px;
    margin: 20px;
    height: 500px;
    background-color: #333333;
}

.left-shadow
{
    background-color: pink;
    width: 200px;
    height: 400px;
    float: left;
}

.right-shadow
{
    background-color: green;
    width: 300px;
    height: 300px;
    float: right;
}

.content
{
    margin-right: 320px;
    margin-left: 220px;
    height: 100%;
    background-color: orange;
}

有效地我们正在做的是左右浮动侧箱，然后在中间箱上设置边距，使其不与侧面重叠。首先包裹你的头可能有点棘手，但它非常扎实。由于我们的中间元素现在是一个未浮动的块，我们可以很容易地将它的高度设置为100％。类似地，可以将边设置为您希望它们的任何高度（或者只是将其内容高度设置为！）。

使中间块高度为100％而垂直邻居是固定的

2 个答案: