CSS忽略始终位于底部页脚模板的父容器

我尝试使用一个始终位于底部的页脚，如本教程中的页脚：

基本上，div结构如下所示：

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

在设计所需的父div将整个结构包装为如下所示之前，这一切都很正常：

<div class="RadAjaxPanel" id="ctl00_ctl00_mainContainerPanel" style="display: block;">
    <div id="container">
        <div id="header"></div>
        <div id="body"></div>
        <div id="footer"></div>
     </div>
</div>

我找不到一个解决方案，当文本没有延伸过视口时，保持页脚在底部，以及当文本足够长，足以将页脚向下推过视口底部时，页脚出现在正文div之后

---

提前感谢您的CSS洞察力

100%到父容器的高度将起作用

<div class="RadAjaxPanel" id="ctl00_ctl00_mainContainerPanel" style="display: block;height:100%">
    <div id="container">
        <div id="header"></div>
        <div id="body"></div>
        <div id="footer"></div>
     </div>
</div>

---

100%到父容器的高度将起作用

<div class="RadAjaxPanel" id="ctl00_ctl00_mainContainerPanel" style="display: block;height:100%">
    <div id="container">
        <div id="header"></div>
        <div id="body"></div>
        <div id="footer"></div>
     </div>
</div>

---

从

容器

中移除

位置：相对

，并将其添加到

。RadAjaxPanel

从

容器

中移除

位置：相对

，并将其添加到

。RadAjaxPanel

为外部元素提供

最小高度
100%
。这将允许您的内部元素遵循原始的预期布局。否则，我建议在页脚和页脚上方分别使用一个块，给页脚上方的块一个
minheight
of
calc（100%=footerhight）
给外部元素一个
minheight
of
100%
。这将允许您的内部元素遵循原始的预期布局。否则，我建议在页脚和页脚上方分别使用一个块，给页脚上方的块一个
minheight
of
calc（100%=footerhight）
，这就成功了！非常感谢您的快速回复！成功了！非常感谢您的快速回复！