インラインブロック要素が利用可能な幅を自動的に埋めることは可能ですか？

Question

<div id="content">は、インラインブロックである<div id="sub-navigation>と<div id="main container">を含んでいます。私はmain containerが利用可能なページ幅の残りを埋めるようにしたいと思います。それは可能ですか？

Iは、拡大又はcolumn要素の数と幅に基づいて縮小するcolumns-stripを必要とします。 columns-stripの幅がmain containerの幅を超える場合は、水平スクロールバーが表示されます。

CSS：

* { 
    margin: 0px; 
    padding: 0px; 
    font-size: 10pt; 
    white-space: normal; 
} 

#wrapper { 
    margin: 0px 20px; 
    background-color: red; 
} 

#header { 
    margin: 25px 10px 10px 10px; 
    height: 50px; 
    background-color: purple; 
    color: white; 
} 

#content { 
    margin: 10px; 
    padding: 10px; 
    font-size: 0pt; 
    white-space: nowrap; 
    overflow: hidden; 
    background-color: white; 
} 

#sub-navigation { 
    width: 200px; 
    height: 150px; 
    display: inline-block; 
    vertical-align: top; 
    background-color: forestgreen; 
    color: white; 
} 

#main-container { 
    padding: 10px; 
    display: inline-block; 
    overflow: auto; 
    background-color: yellow; 
} 

#columns-strip { 
    padding: 10px; 
    font-size: 0pt; 
    white-space: nowrap; 
    background-color: mediumturquoise; 
} 

.posts-column { 
    margin: 0px; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    vertical-align: top; 
    overflow: auto; 
} 

#footer { 
    margin: 10px 10px 25px 10px; 
    height: 50px; 
    background-color: navy; 
} 

HTML：

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content">  
    <div id="sub-navigation"></div>  
    <div id="main-container"> 
     <div id="columns-strip">  
     <div class="posts-column" style="background-color: lightgray;"></div> 
     <div class="posts-column" style="background-color: darkgray;"></div> 
     <div class="posts-column" style="background-color: gray;"></div> 
     </div> 
    </div> 
    </div> 
    <div id="footer"></div> 
</div> 

Answer 1

inline-blockのスタイルを削除し、#sub-navigation divをフロートさせる必要があります。 inline-blockは、達成しようとしているものには適していません。表示スタイルを追加しない場合、div要素はデフォルト値であるblock、block要素はデフォルトで利用可能なすべての領域を占有します。 #sub-navigation要素を浮動させることによって、コンテンツに必要なスペースだけを占有させることができます。

#sub-navigation { 
    width: 200px; 
    height: 150px; 
    float : left; 
    vertical-align: top; 
    background-color: forestgreen; 
    color: white; 
} 

#main-container { 
    padding: 10px;   
    overflow: auto; 
    background-color: yellow; 
} 

[はい、あなたはあなたのメインコンテナが利用可能なスペースを埋めることができ、あなたのヘッダー、フッター、およびラッパーは、特定の幅を持っている場合#main-container

Answer 2

inline-block Sを使用することになっているかではありません。ここで行う最も良いことは、ナビゲーションボックスfloat:leftを作成し、デフォルトのdisplay値のままにしておくことです。

Answer 3

後clear: left要素を追加してください。しかし、CSSで幅を指定していない場合は、包含する要素（ラッパー）のレンダリングされた幅に基づいてメインコンテナの大きさを決定する必要があります。ページが読み込まれた後の幅を判断する唯一の方法は、javascriptで行う方法です。あなたのサイトに動的な幅を持たせたいが、あなたのコンテンツ（サブナビゲーションとメインコンテナ）が画面いっぱいになるようにするには、javascriptまたはパーセンテージを使用する必要があり、さまざまな解像度を見てみると、モニター、ラップトップなど...

Answer 4

これまでに聞いたことがありますフレックスボックスモデル！

それだけで作られています。

フレックスボックスモデルでは、すべての子要素がフレックスボックスモデルとして機能し、特定のものをオプトアウトすることはできません。つまり、ページにナビゲーションがあり、その下にコンテンツdiv + side divがあることを意味します。一番上のナビゲーションはできません。それには意味があります。だから解決策は、1つのdivにフレックスボックスだけが必要なすべてのものを持つことです。