1

「ラッパー」内のすべてをラッパーに合わせて伸ばしたいだけですが、すべてが煩わしく、固定された高さのままですか??

だから私は「コンテンツ」エリアの「サイドバー」と「内側」を常に同じ高さにしたいと思っていました。 「ヘッダー」、「ナビゲーション」、および「フッター」。しかし、私が試したことは何もうまくいかないようです。私はある時点でそれを持っていましたが、コードを失い、何をしたか忘れてしまいました..助けてください。:c

また、'wrapper's min-height を変更するとどうなるかを試していたので、非常に低いのです。

わかった。指定する: 1 つには、「ラッパー」がその内部のすべてをカプセル化し、「内部」の div のように、テキストで満たされ、「 content' さらに、'sidebar' と 'inside' の高さを同じに保ちたいと思っています。0 ボトム; 0 w/ei はここにあります。

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>

4

1 に答える 1

0

私が理解しているなら、あなたは同じ高さのカラムを探しています。

次の2つのリンクを確認してください。

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 に答える