2

ページの左側にドッキングされる「コンテナー」div があり、常に上、左、下から 10 ピクセルになります。その div の内側には、垂直に配置された 10 個の小さな「内側」の div があります。コンテナーは常に、すべての内部 div を保持するのに十分な幅にする必要があります。

これが問題です...コンテナdivがすべての内部divを単一の列に保持できない場合（ユーザーがブラウザの高さを縮小した場合など）、内部divを新しい「列」に拡張したい（それでもコンテナ div 内に残ります)。つまり、コンテナー div は必要に応じて水平方向に拡張されるため、垂直スクロールバーが表示されることはありません。

たとえば、ブラウザの高さが div 7 までしか下がらない場合、次のようになります...

1      8
2      9
3      10
4
5
6
7

これが私がこれまでに得たもののjsFiddleです...

http://jsfiddle.net/ymESU/

そして、ここにコードがあります...

<!DOCTYPE html>
<html>

<head>

<style>
    #container {position: absolute; top: 10px; left: 10px; bottom: 10px; border: 1px solid black; padding: 5px; } 
    .innerBoxes {display: block; width: 100px; height: 100px; background: red; margin: 5px; padding: 10px; color: white;}
</style>

</head>

<body>

<div id="container">
  <div class='innerBoxes'>1</div>
  <div class='innerBoxes'>2</div>
  <div class='innerBoxes'>3</div>
  <div class='innerBoxes'>4</div>
  <div class='innerBoxes'>5</div>
  <div class='innerBoxes'>6</div>
  <div class='innerBoxes'>7</div>
  <div class='innerBoxes'>8</div>
  <div class='innerBoxes'>9</div>
  <div class='innerBoxes'>10</div>
</div>

</body>
</html>

これを達成するために何が欠けていますか？

参考までに、この特定のプロジェクトでは、最新バージョンの Chrome でのみ動作する必要があるため、最適なソリューションに CSS3 が必要な場合でも問題ありません。

4

1 に答える 1