Question

在我的网站布局中，我使用负边距将我的左栏移到我的横幅旁边，使其重叠。问题是我不知道横幅在最终版本中的高度。起初我在左栏使用了position：absolute，但是它不会起作用，因为它需要成为布局的一部分并在必要时向下推页脚。我想知道如何将左栏放在页面顶部，因为那时我可以设置一个与页眉高度相同的上边距，因为它不会改变高度。我可以用javascript来解决这个问题，但我想避免这种情况并使用纯粹的CSS。

https://jsfiddle.net/z77fwaj7/1/

＆＃13;

#Header
{
    background-color: gray;
    height: 50px;
}
#Banner
{
    background-color: orange;
    height: 50px;
}
#Content
{
    background-color:white;
    border:1px solid red;
    max-width:500px;
    margin:0px auto;
}
#LeftColumn
{
    float:left;
    height:200px;
    width:25%;
    background-color: blue;
    margin-top:-51px;/*this needs to be dynamic*/
}
#MiddleColumn
{
    float:left;
    height:200px;
    width:45%;
    background-color: yellow;
}
#RightColumn
{
    float:left;
    height:250px;
    width:30%;
    background-color: green;
}
#Footer
{
    background-color: gray;
    height: 50px;
}

＆＃13;

<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
    <div id="LeftColumn">left</div>
    <div id="MiddleColumn">middle</div>
    <div id="RightColumn">right</div>
    <div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>

＆＃13;

Answer 1

这是好的。

<style type="text/css">
#Header
{
    background-color: gray;
    height: 50px;
}
#Banner
{
    background-color: orange;
    height: 50px;
}
#Content
{
    background-color:white;
    border:1px solid red;
    max-width:500px;
    margin:0px auto;
}
#LeftColumn
{
    float:left;
    height:200px;
    width:25%;
    background-color: blue;
    margin-top:0px;
}
#MiddleColumn
{
    float:left;
    height:200px;
    width:45%;
    background-color: yellow;
}
#RightColumn
{
    float:left;
    height:250px;
    width:30%;
    background-color: green;
}
#Footer
{
    background-color: gray;
    height: 50px;
}
</style>

<div>
<div id="Header">header</div>
<div id="Banner">banner</div>
<div id="Content">
    <div id="LeftColumn">left</div>
    <div id="MiddleColumn">middle</div>
    <div id="RightColumn">right</div>
    <div ></div>
</div>
<div id="Footer" style="clear:both;">footer</div>
</div>

Answer 2

如果有人好奇我必须改变我的布局才能让它在没有javascript的情况下运行。当Banner缩小时，BackgroundBanner不会改变高度，但在我的情况下并不重要，因为它无论如何都不会被看到。

https://jsfiddle.net/z77fwaj7/4/

的CSS：

#Header
{
    background-color: gray;
    height: 50px;
}
#Background
{
    position:absolute;
    width:100%;
    z-index:-1;
}
#BackgroundBanner
{
    height: 50px;
    background-color:orange;
}
#Banner
{
    float:left;
    background-color: orange;
    height: 50px;
    width:75%;
}
#Content
{
    background-color:white;
    border:1px solid red;
    max-width:500px;
    margin:0px auto;
}
#LeftColumn
{
    float:left;
    height:200px;
    width:25%;
    background-color: blue;
}
#MiddleColumn
{
    float:left;
    height:200px;
    width:45%;
    background-color: yellow;
}
#RightColumn
{
    float:left;
    height:250px;
    width:30%;
    background-color: green;
}
#Footer
{
    background-color: gray;
    height: 50px;
}

HTML：

<div id="Header">header</div>
<div id="Background">
    <div id="BackgroundBanner"></div>
</div>
<div id="Content">
    <div id="LeftColumn">left</div>
    <div id="Banner">banner</div>
    <div id="MiddleColumn">middle</div>
    <div id="RightColumn">right</div>
    <div style="clear:both;"></div>
</div>
<div id="Footer">footer</div>

CSS根据另一个div的动态高度定位div

2 个答案: