Question

简单的问题，虽然显然不是一个简单的解决方案。

基本上该网站由两列组成，虽然没有包装或类似的东西，因为我真的很喜欢尽可能少的部分，部分是为了简单，但也使用HTML5语义，在我看来并不真正包含div，无论它们的命名方式如何恰当。

但是，我想让侧边栏填满相邻列的整个高度，这并不像我原先想象的那么容易。我知道这是一个老问题，但我确信我之前已经解决过了。

无论如何，我试图在不使用包装器或JavaScript的情况下弄清楚如何做到这一点。 JavaScript是不行的，但这是另一个故事。我确信会有一些聪明的CSS3功能或者类似的功能，可以解决我的问题，而不需要包装器，但是我对这个需要功能的搜索是一个史无前例的失败。

所以我对自己说：“该死的！好吧，那就必须使用包装纸。”

我确信它会起作用。我尝试了不同的配置，但不管我做了什么，如果不设置周围包装的绝对高度，我就无法工作。想象一下我的失望，当我确定以前做过它时再次失败。所以我再次寻找满足我需求的解决方案。虽然这次出现了更多的材料，但它仍然是一个失败。我发现的几个解决方案至少可以说是有问题的。

所以，现在我又回到了这里，又问了另外一个问题，这些问题无疑已被问过数千万次。我很抱歉，但我真的不知道还能去哪里。

我希望你能提供帮助。

提前致谢并致以最诚挚的问候。

编辑：

这完全符合我的要求：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
       body {
        margin: 0 auto;
        width: 800px;
      }
      #wrapper {
        position: relative;
        width: 800px;        
      }
      body > header, body > footer {
        background-color: red;
        width: 800px;
      }
      #wrapper > article {
        margin-right: 200px;
        width: 600px;
        background-color: blue;
      }
      #wrapper > aside {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <header>This is a header</header>
    <div id="wrapper">
      <article>
        This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
      </article>
      <aside>
        And this is the sidebar! I dynamically make myself bigger based on the content on the left!
      </aside>
    </div>
    <footer>This is a footer</footer>
  </body>
</html>

只剩下问题就是摆脱那该死的div标签;）

编辑： css表显示属性已经向我指出了，它似乎正是我正在寻找的，作为智能解决方案，但是在一行中有多个元素，而在另一行中只有一个，我无法想象应该怎么做。

Answer 1

如果不要求IE6兼容性，那么我通常会做以下html：

<div class="container">
    <div class="content">
        This is the content
    </div>
    <div class="sidebar">
        And this is the sidebar! I dynamically make myself bigger based on the content on the left!
    </div>
</div>

这就是CSS：

.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }

JSFiddle示例：http://jsfiddle.net/geC3w/

这适用于所有现代浏览器和Internet Explorer 7及更高版本，只要IE6兼容性不是必需的，它也非常简单

Answer 2

如果不要求IE7兼容性，请使用display: table-cell;：

body {
    margin: 0 auto;
    width: 800px;
}
#wrapper {
    position: relative;
    width: 800px;        
}
body > header, body > footer {
    background-color: red;
}
#wrapper > * {
    display: table-cell;
}
#wrapper > article {
    width: 600px;
    background-color: blue;
}
#wrapper > aside {
    width: 200px;
    background-color: green;
}

Working example

100％容器高度问题 - HTML5 / CSS2 / 3

2 个答案: