CSS：流体サイドバー - 流体の内容

enter image description here CSS：流体サイドバー - 流体の内容

すべては上記の画像で説明しています。

基本的に、ウィンドウの幅の残りの部分に展開するmainContentの内容に応じて幅が拡張されるサイドバーdivが基本的に必要です。

2009-07-15 RyanScottLewis

いいですね。そこに質問がありますか？または単に作業命令ですか？私は質問に答えますが、私はあなたの仕事をしません。 – geowa4

サイドバーがコンテンツに応じて展開される場合は、テキストの一部の行で100％の幅に拡大されます。サイドバーの定義でもありません。 – stefanw

これはそうするようです。しかし、@stefanwにはポイントがあります。サイドバーはテキストの幅に拡大されます。つまり、テキストは折り返されません。私はおそらくあなたが望むものではないと思う。それとも、あなたが入れているものが幅広いものではないが、どちらかといえば固定されていないのだろうか？

<html> 
<head> 
    <style type="text/css"> 
#overallWrapper div { 
    background: #CCC; 
    border: 1px solid black; 
    padding: 15px; 
    height: 100%; 
} 
#sideBar { 
    float: left; 
} 
    </style> 
</head> 
<body> 
    <div id="overallWrapper"> 
    <div id="sideBar"> 
     I need this to expand to the width of this text... 
    </div> 
    <div id="content"> 
     This should take the rest of the room, whatever's left... 
    </div> 
    </div> 
</body> 
</html>

必要に応じてoverallWrapperを削除できます。

出典

2009-07-16 00:23:38 pkaeding

完全ではありませんでした！ありがとう、皆さん。 – RyanScottLewis

左側のサイドバーの幅が気になる場合は、インラインコンテンツが改行されていない場合に備えて、最大幅のcssプロパティを左側のdivに適用できます。

また、ie7をmax-widthでサポートしている場合は、doctypeが厳格であることを確認してください。

出典

2009-07-16 00:29:27 brack

CSS：流体サイドバー - 流体の内容

答えて

関連する問題