CSS位置基于另一个div的动态高度的div

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

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

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

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

来源

2015-05-01 JoJo

这是好的。

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

来源

2015-05-01 14:21:07

我需要左栏覆盖横幅。你们是不是这样做，https://jsfiddle.net/ksttsmm0/ – JoJo

你的意思是t0说横幅显示完全 –

得到了你的问题 –

如果有人很好奇，我不得不改变自己的布局，以便在没有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>

来源

2015-05-01 19:52:12 JoJo

作为结论：
在CSS另一元件上利用的元素的值是不可能的。（据我所知）
因此，有两种解决方案：

改变布局。
使用javascript。

我宁愿第二个。不知道为什么这样做是如此的耻辱。
一个简单的简单的JavaScript更好，然后搞乱布局。（在我看来）

来源

2015-05-02 11:29:26 JerryShort

CSS位置基于另一个div的动态高度的div

回答

相关问题