0

2 つの div を含む高さが定義されたコンテナーがあります。1 つ目はピクセル定義の高さで、2 つ目はコンテナーの残りのスペースを埋めたいと考えています。つまり、100% から最初の div のピクセル定義の高さを差し引いたものです。

JavaScript を使用しないこの問題の解決策はありますか? 私は JavaScript ソリューションを使用できます (実際、コンテナーの高さを変更する JavaScript が私をここに導きました) が、これには低レベルのサポートが必要なようであり、これはかなり連鎖的な問題になる可能性があるようです。

例

http://jsfiddle.net/h3gsz/1/

HTML

<div id="container">
    <div id="top_content"></div>
    <div id="remaining_content"></div>
</div>

CSS

#container {
    width: 400px;
    height: 400px;
    border: 5px solid black;
}
#top_content {
    background-color: blue;
    width: 100%;
    height: 50px;
}
#remaining_content {
    background-color: red;
    width: 100%;
    height: 100%;
}

編集

元のフィドルに対する回答はすでに提供されていましたが、質問を単純化するために、回答が新しい問題を引き起こすことを許可しました: http://jsfiddle.net/h3gsz/6/

インライン ブロック スタイルと最大幅の値を削除しました。残りのコンテンツの絶対位置を考えると、コンテナーの幅は (インライン ブロックからの) 当該コンテンツによって定義されなくなります。

単純に新しい質問を作成する必要があるかどうかはわかりません。

4

5 に答える 5

1 
#container {
    width: 400px;
    height: 400px;
    border: 5px solid black;
    position: relative;
}
#top_content {
    background-color: blue;
    width: 100%;
    height: 50px;
}
#remaining_content {
    background-color: red;
    width: 100%;
    top: 50px;
    bottom: 0;
    position: absolute;
}

http://jsfiddle.net/h3gsz/4/

于 2013-04-08T23:31:04.063 に答える
1

を使用してはoverflow:hidden;どうですか？

#container {
    width: 400px;
    height: 400px;
    border: 5px solid black;
    overflow:hidden;
}

JSFiddle。

于 2013-04-08T23:25:14.303 に答える
0

より経験豊富な人がより良い選択肢を持っているかもしれませんが、これを試すことができます: 

#container { 
width: 400px; 
height: 400px; 
border: 5px solid black;
overflow: hidden ;
}  
#top_content { 
background-color: blue;
width: 100%;
height: 50px; 
} 
#remaining_content { 
background-color: red; 
width: 100%; 
height: 100%; 
margin-bottom: 0;
}

これを何に使用するかに応じて、#remaining_content <div>

HTML:

<div id="container">
  <div id="top_content"></div>
</div>

CSS:

#container {
  background-color: green;
  width: 400px;
  height: relative;
  min-height:400px;
  border: 5px solid black;
  overflow:none;
  word-wrap:break-word;
}
#top_content {
  background-color: blue;
  width: 100%;
  height: 50px;
}
于 2013-04-08T23:35:42.963 に答える
0

なぜ自動を使用しないのですか？

http://jsfiddle.net/h3gsz/3/

CSS:

#container {
  width: 400px;
  height: auto;
  border: 5px solid black;
}
#top_content {
  background-color: blue;
  width: 100%;
  height: 50px;
}
#remaining_content {
  background-color: red;
  width: 100%;
  height: auto;
}
于 2013-04-08T23:25:51.830 に答える
0

display:table; を使用して行うこともできます。ここでフィドル

.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}

.container {
display: table;
}

.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}

.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
于 2013-04-09T00:07:29.320 に答える