Css 如何使页脚垂直向下拉伸并与页脚对齐

我对使用tableless进行网页设计还不熟悉，在页面上定位某些元素时遇到了问题

以下是示例html：

正如您从屏幕截图中看到的，我希望我的右div垂直向下延伸到页脚的同一级别，并将我的底部元素定位到右容器的最低部分

CSS:

HTML标记：

<div class="container showgrid">
  <div id="header">
    <h1>Header</h1>
  </div>
  <div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
  <div id="main">
    <div id="center">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Content here</p>
    </div>
  </div>
  <div id="footer">
    <h3>Footer</h3>
  </div>
</div>

标题
顶部元件底部元件
Lorem ipsum dolor sit amet
满足于此

页脚

这并不能完全解决您的问题，但它会让您走上正确的道路

看哪

如果这不起作用，你可以使用的另一种方法是伪造专栏。这是通过垂直平铺背景图像来完成的，背景图像的宽度为您希望列位于的位置后面。它还不错，可以在紧要关头工作。

css:

#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer 
{float:left;}

html:

div.header <br>
div.center + div.left <br>
div.footer + div.right

div.header

中间部分+左侧部分

div.footer+div.right

---

应该是这样的/

它放在HTML标记中的什么位置？你能不能也发一些HTML，这样我们可以帮你做得更好一些先生，html标记可以在上面的链接上看到，无论如何，我将编辑我的帖子。先生，谢谢你的回答，我正在阅读圣杯的文章，我发现它对像我这样的初学者来说非常有趣。

div.header <br>
div.center + div.left <br>
div.footer + div.right