0

このような初心者の質問で申し訳ありませんが、この 100% の高さを機能させることはできません。状況は次のとおりです（申し訳ありませんが、ローカルで開発しているため、リンクはありません）：

2 つの浮動要素を含むラッピング コンテナーがあります。次のような、100% 問題を解決する可能性のあるすべての手順に従いました。

html, body {
  height: 100%;
  background: url(../img/bg.png);
  font-family: 'SansationRegular', Helvetica;
}

.wrap {
  width: 100%;
  height: 100%;
  height: auto !important; (apparently this fixes the issue in Chrome)
  margin:40px 0px 0px 0px;
  padding:0;
}

両方のフローティング div (サイドバーとコンテンツ) の高さは 100% で、フローティング要素をクリアするために 3 つ目の div コンテナーも追加しました。

それでも、コンテンツ div にコンテンツを追加しても、サイドバーは自動的に「成長」しません。私はすべてを試したように感じますが、うまくいきません。

この時点で、どんなアイデアやヒントも大歓迎です！:)

よろしくお願いします！

PS私の問題を解決するのに役立つ場合に備えて、Twitter Bootstrapも使用します

4

1 に答える 1

0

これは、あなたがやろうとしていることを行う方法を示す基本的な例です。このコードを自分のコードに適応させることができるはずです。

http://jsfiddle.net/QXZuy/1/

<div class="wrap">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>


html, body {
  height:100%;
}
.wrap {
  height:100%;
  width:100%;
  display:table;
  overflow:auto;
  background:#ccc;
}
.sidebar {
  display:table-cell;
  width:25%;
  background-color:blue;
}
.content {
  display:table-cell;
  width:75%;
  background-color:red;
}
于 2013-01-10T22:36:51.463 に答える