是一个高度自动

问题描述:

我有我使用的容器,以适应在页脚东西是一个高度自动

#footcompatible { width:985px; height:50px; display:block; position:relative; left:0; top:0; <--- FIXED changed to top = 50px (the height) and added bottom -50px} 

这里一个div的母版页上一些HTML:

<asp:ContentPlaceHolder ID="MainContent" runat="server" />    
    <div id="footcompatible"> 
    <div class="footerbarsTop"><!-- insert footer bar --></div> 
    <div id="footerblock"><%Html.RenderPartial(ViewData["footer"].ToString()); %></div>  
    <div class="footerbarsBot"><!-- insert footer bar --></div> 
    </div> 

的的ContentPlaceHolder获取与内容替代从我 页例如: 扩大内容 等等等等文字等 等等等等blahl

和aboves CSS:

.iceabtside {display:block; width:271px; height:auto; position:absolute; left:697px;  top:0; border:0px solid white; text-align:left;} 
also this is what i missed of on my initial paste 
.iceabtfm 
{ 
    display:block; width:661px; height:auto; position:relative; left:24px; top:0; text-align:left; 
} 

页脚块我希望来后,这一点,但我实际上得到的是它是一半时页面而不是内容,我添加的内容越多也不重要,它只是停留在似乎让自己的家变得疯狂的地方,我不能定位绝对位置,因为我永远不知道上面的内容的高度!如果我将它的位置移到内容的顶部,那就很奇怪了,现在有点磕磕碰碰。

+0

顺便说一句,一些网络浏览器有插件来帮助你今天。如果您使用的是Firefox的提示,请下载Firebug插件。然后,您可以检查HTML中的元素并即时更改其CSS样式。我知道Google Chrome和Opera有类似的工具。 – Patrick 2010-03-06 18:42:11

+0

这个问题源于事实上divs被绝对定位在容器内部,当内部内容扩展时容器不会扩展已经尝试了相对位置,但这似乎也不被喜欢,我想我将不得不使用float ,我通常不喜欢使用浮动,但我认为这是唯一的解决方案,让定位元素扩大容器。 – davethecoder 2010-03-06 18:42:34

+0

@ minus4你不能让一个容器扩展到绝对定位的子容器的大小,我很害怕。绝对定位将元素完全排除在流程之外,它不能再用于“推”其他事物。 – 2010-03-06 18:46:01

在你的.iceabtside css类中,你定义的位置是绝对的。因此,footer div不会“知道”icebtside div的位置,并将其放置在其以前的相对div之后,即使您的iceabtside div位于相同的位置。

我无法理解您的描述。您可以重新翻译一下,或者制作一个在线示例或素描吗?

安韦,两个基本规则:

  • position: absolute是相对于所述主体或与任一position: absoluterelative集中的下一个祖先元素。因此,在您的示例中,footCompatible中的任何内容(其中position设置为absolute)将以footCompatible的左上角为起点(左= 0,上= 0),而不是整个文档。除了将元素从相对定位的元素中取出外,没有办法解决这个问题。

  • Position: absolute需要一个元件出该文档的流动的,种使其漂浮在所有其它元件(未与float属性混淆,这是soemthing不同。)这是不可能具有position: absolute元件推后续页脚元素进一步下降,取决于其高度。您必须在页面中嵌入页脚,或采取其他方法。

+0

是的感谢教程我得到他们做什么,有一个包装周围,它是相对定位,然后我把div放在里面,但是当添加内容时,即使设置为相对或其他亲属,它也不会展开容器里面的内容。我设置footerbar相对希望无论高度如何,它总是会相对于内容底部 – davethecoder 2010-03-06 18:45:56

+0

@ minus4 aah,如果你的问题是“iceabtside”不会扩展,那么它是不同的,那么你正在寻找一个'clearfix'。在SO – 2010-03-06 18:47:52

+0

@ minus4上搜索“clearfix”http://*.com/questions/211383/which-method-of-clearfix-is-best – 2010-03-06 18:48:26

那么,一个相对位置设置与它在文档中原始指定的位置上的元素这么多的像素的位置。设置顶部和左侧都为0不会移动元素。例如,如果您将顶部设置为10,则会将元素从分配的位置向下移动10个像素。或者,如果将右侧设置为50,则会将元素从该位置左移50个像素。请注意,相对定位的元素不会导致其周围的任何元素重新定位,它将简单地重叠类似于绝对定位元素的任何元素。

您的'冰上杯'类似乎毫无价值。首先,您不需要将分区声明为块,因为这是默认设置,并且声明高度为默认值,它会根据其中的内容自动调整高度。看起来你需要做的是摆脱所有定位的东西,只需在页面中间设置页边空白或任何你想要做的事情。这样,页脚元素就会在你喜欢的所有内容之后出现。