Question

我是使用无表格的网页设计的新手，我在页面上定位一些元素时遇到了问题..

以下是示例html：http://christianruado.comuf.com/sample.html alt text http://christianruado.comuf.com/images/screen.jpg

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

CSS：

.container {
    width:88%;
}
#header {
    background:#CCCCCC;
    margin-bottom:5px;
    padding-bottom:2px;
    height:100px;
    text-align:center;
}
#content {
    background: #0099CC;
    margin-bottom:5px;
}
#main {
    margin: .5em 0 0 0;
    text-align: left;
    width:80%;
}
#right {
    float:right;
    width: 19%;
    background:#FF3300;
    margin-left:2px;
    height: 100%;
    min-height: 200px;
}
#right .top {
    top:0;
    display:block;
    background-color:#CCCCCC;
}
#right .bottom {
    bottom:0;
    display:block;
    background-color:#FFCCFF;
    height:30px;
}
#center {
    background:#00FF99;
    padding: 5px 0 0 10px;
    float:left;
}
#footer {
    clear:both;
    height:30px;
    background-color:#CCFF33;
    width:80%;
    text-align:left;
}

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>

Answer 1

这不是您问题的答案，但它应该让您走上正确的轨道。

看哪！ The Holy Grail！

如果这不起作用，您可以使用的另一种技术是伪造列。这是通过将列的宽度垂直平铺到您希望列所在的列后面来完成的。它并不坏，可以在紧要关头工作。

Answer 2

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

应该是这样/

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

2 个答案: