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

时间:2013-06-20 14:16:44

标签: html css layout

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

2 个答案:

答案 0 :(得分:0)

喜欢这个?

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

答案 1 :(得分:0)

所以,如果我理解你的问题,我相信你会选择三列布局,其中中间列始终是其父级的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%。类似地,可以将边设置为您希望它们的任何高度(或者只是将其内容高度设置为!)。