0

フルハイトのサイドバー ソリューションを備えたスティッキー フッターを探していたところ、ここで部分的に見つかりました。

さらに別の HTML/CSS レイアウトの課題 - 固定フッター付きの全高のサイドバー

正解としてマークされた投稿はきちんとした解決策を説明していますが、フッターと同じように、流動的なコンテンツ div を固定のものにすることは可能かどうか疑問に思っていました。（固定とは、固定幅を意味します）。

コンテンツの div とフッターは、画面の表示可能な幅全体をカバーする必要があり、サイズを変更する場合、ウィンドウに合わせてサイズ変更しないでください。それらは同じままで、代わりにスクロールバーが表示されるはずです。

また、私が求めているもう 1 つの特定のことは、サイドバーに左マージンを追加することです。フィドルは次のとおりです。

http://jsfiddle.net/2NbMg/

<div id="wrapper">
            <div id="content">
                <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
                <div id="main">
            Content
                </div>
            </div>
            <div class="push"></div>
        </div>
<div id="footer"><div id="footer-content">Footer</div></div>

(CSS は、この投稿を整理するために fiddle で見つけることができます)。

ああ、ウィンドウからではなく、サイドバーの右側からコンテンツをスパンする方法があれば、それは素晴らしいことです!

私はこれを2日間検索して達成しようとしましたが、成功しませんでした。誰かが助けてくれたら本当にありがたい..

後で@toninojを編集します。

ご意見をお寄せいただきありがとうございます。あまり明確でないことをお詫び申し上げます。基本的に、特にワイドスクリーンとラップトップでは、フッターを全幅にしたいと考えています。幅 100% から離れたい理由は、ウィンドウのサイズが変更された (小さくなった) ときにフッターを大きくしたままにし、サイズ変更やウィンドウのサイズに応じて調整しないようにするためです。フッターにはかなりの量のデータが含まれており、サイズを変更すると見栄えが悪くなります。

幅を固定するために大量のピクセルを投入できますが、たとえばラップトップで問題が発生することはありませんか? (必須ではありませんが、スクロールバーが表示されます)

4

1 に答える 1

0

要素の正確な幅を指定する必要があります。たとえばwidth:200px;、position:fixedスティッキーにするために指定する必要があります。また、あなたはそれを与える必要がありますoverflow:scroll;

スクロールバーのない固定幅のフッターが必要な場合は、次のように指定するだけです

width:1600px;
overflow:hidden;
于 2012-11-14T18:44:28.260 に答える