2

ページの中央に高さのパーセンテージを持つ動的ラッパーがあります。

その内部には、高さが固定されたナビゲーション バーと、残りのスペース (ラッパーの 100% からナビゲーション バーを差し引いたもの) を占めるニュースフィードがあります。

JavaScript を使用して新しいニュース項目をフィードに追加しています。

問題:コンテナーはニュースと共に大きくなります。200px のように高さが固定されている場合は大きくなりません。しかし、それは私が望むものではありません。

この問題は私を夢中にさせています。

ここでチェックしてください：http://codepen.io/anon/pen/vedwA

[アップデート]

ニュースフィードの代わりに #itemsContainer にテキストエリアがあるとどうなりますか? もちろん、テキストエリアは、itemscontainer の高さと幅の 100% を占める必要があり、ユーザーがさらに多くのテキストを貼り付けた場合でも、そのサイズを維持する必要があります。

私の例では、テキストエリアは外側の #wrapper 内にとどまりますが、ナビゲーションを一番上に押し出します。codepen の例では、テキストエリアは正しい動作を示していますが、100% を占めていません。どちらの方法でも、機能しません:-( http://codepen.io/anon/pen/nGmua

** 解決 **

position: absolute;
top: 50px;
bottom: 0px;
width: 100%;

高さ = 100% ではなく、固定された上部と下部 = 0px を介してコンテナーを引き伸ばしています。これは、親コンテナーに position: relative; がある限り機能します。

4

1 に答える 1

0

問題は、デフォルトの とdisplay: table一緒にさまざまな形であるようです。技術的には、あなたのニュース項目はこぼれるのではなく、テーブルを拡大しています。overflow: visible#wrapper

ソリューションには、に適用overflow: hiddenする必要があり#wrapperます。ただし、このoverflowプロパティはテーブル要素では機能しません。だから、私たちは取り除きdisplay: tableます。以下のコードで私の注釈を参照してください。

それが役に立てば幸い。

body {
  background: #900;
}

div {
  padding:0px;
  margin:0px;
  background: grey;
  color: white;
  text-align: center;
}

#wrapper{
  position:absolute;
  width: 40%;
  height: 50%;
  background: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid white;
  /* display: table;  should be block */
  overflow: hidden /* added */
}

#navigation{
  top:0px;
  height:50px;
  width: 100%;
  background: black;     
}

#itemsContainer{
  top:20px;
  /* width:100%;
     height: 100%;
     overflow: hidden;  you don't need these any more */
  background:red;
  /* display:table-row; should be block */
}

#itemsContainer div{
  border-bottom: 1px dashed white;
  padding: 1em;  
}
于 2013-11-03T00:31:16.710 に答える