1

我只想让“包装器”中的所有东西都伸展以适合包装器，但一切都很烦人并且保持固定高度？

所以我希望“内容”区域的“侧边栏”和“内部”始终保持相同的高度，并且我还希望“内容”始终拉伸以适应“包装”，同时拥有“页眉”、“导航”和“页脚”。但我尝试的任何方法似乎都不起作用。我曾经有过它，但丢失了代码并忘记了我做了什么..帮助？：C

我也在玩，看看通过改变'包装器的最小高度会发生什么，这就是它如此低的原因。

好的。指定：一方面，我希望“包装器”将所有内容封装在其中，并在其中一个孩子增加高度时始终增加其高度，例如“内部” div 填充了文本并增加了“ content' 另外，我还希望'sidebar'和'inside'保持相同的高度，也就是为什么它们的高度为100％或顶部；0 底部；0 w/ei 在这里。

网页：

#wrapper {
  width: 1000px;
  min-height: 300px;
  background-color: red;
  position: relative;
  margin: auto;
  margin-bottom: 10px;
  border: 1px solid black;
}
#header {
  width: 100%;
  background-color: blue;
  height: 100px;
  float: left;
  clear: both;
  position: relative;
  border-bottom: 1px solid black;
}
#content {
  width: 100%;
  background-color: grey;
  height: 100%;
  float: left;
  clear: both;
  position: relative;
}
#sidebar {
  width: 180px;
  background-color: green;
  float: left;
  position: absolute;
  top: 0px;
  bottom: 0px;
  padding: 10px;
  border-right: 1px solid black;
}
#inside {
  width: 779px;
  padding: 10px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background-color: orange;
  float: right;
}
#footer {
  width: 100%;
  height: 100px;
  float: left;
  clear: both;
  background-color: pink;
  border-top: 1px solid black;
}
#nav {
  width: 100%;
  border-bottom: 1px solid black;
  float: left;
  clear: both;
  height: 20px;
  background-color: purple;
}
<div id="wrapper">

  <div id="header">
    hi
  </div>

  <div id="nav">
    hi
  </div>

  <div id="content">

    <div id="sidebar">
      sidebar stuff
    </div>

    <div id="inside">
      inside stuff
    </div>

  </div>

  <div id="footer">
    hi
  </div>

</div>

4

1 回答 1

0

如果我理解，您正在寻找相同高度的列。

检查这两个链接：

http://css-tricks.com/fluid-width-equal-height-columns/

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-12-04T01:07:35.433 回答