Question

我只是想让'wrapper'中的所有内容伸展开来以适应包装器，但是一切都很烦人并保持固定的高度？

所以我希望'内容'区域的'侧边栏'和'内部'在所有时间都是相同的高度，我也希望'内容'能够随时拉伸以适应'包装' ，同时拥有'标题'，'导航'和'页脚'。但我没有尝试似乎工作。我曾经有过它，但丢失了代码并忘了我做了什么..帮忙？：C

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

OKAY。指定：对于一个，我希望'包装器'封装其中的所有内容，并且当其中一个子项增加其高度时总是增加其高度，就像'inside'div填充文本一样并增加'内容'的高度另外，我也希望'侧边栏'和'内部'保持相同的高度，也就是为什么它们的高度为100％或顶部; 0底; 0 w / e我在这里。

HTML ：

#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>

Answer 1

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

检查以下两个链接：

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

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

分区不起作用

1 个答案: