web-dev-qa-db-ja.com

HTML / CSSフルハイトサイドバー

この質問に関連してインターネット上に散らばっている議論や質問がたくさん見つかりましたが、それらのどれも私のケースに一致しないようであり、解決策は特定の状況に非常に固有のものです。

ページの上部に高さ100pxのheader要素があります。私はdiv#sidebar要素を250pxの幅で左にフロートさせ、最後にdiv#main要素も左にフロートさせました。

html、body、およびdiv#sidebarの高さは100%です。

私の目標は、ブラウザのサイズやコンテンツのサイズに関係なく、div#sidebarをページの一番下まで伸ばすことです。明らかに、コンテンツが表示可能なページの高さよりも長い場合、コンテンツは正常に動作し、ページの終わりを超えてプッシュされ、スクロールバーが導入されます。

ただし、現状では、ページの高さは100% + 100pxとして計算されているようで、div#sidebarを押し下げるコンテンツがない場合でも、スクロールバーが導入されています。これまでのところ、うまくいく解決策が見つからなかったか、おそらく私はそれを逃したか、解決策を台無しにしました。とにかく、私は1時間以上ずっとこの場所にいて、髪の毛をはぎ取るところです。

これを正しく機能させてheaderの高さが100%に追加されないようにするJavaScript以外の方法はありますか？

これが私のHTML/CSSです。上記に関連する詳細をすべて含めましたが、これは役立つはずです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Awesome Template!</title>
        <link href="./stylesheet.css" rel="stylesheet" />
    </head>
    <body>
        <header id="primary">
            <h1>My Awesome Template!</h1>
        </header>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
        <div id="main">
            <h1>Main</h1>
        </div>
    </body>
</html>

CSS：

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background: #fff;
    font: 14px/1.333 sans-serif;
    color: #080000;
}

header#primary
{
    width: 100%;
    height: 100px;
    background: #313131;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
    background-image: -moz-linear-gradient(#4d4d4d, #313131);
    background-image: -o-linear-gradient(#4d4d4d, #313131);
    background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
    margin: 0px 0px 0px 20px;
    padding: 0px;
    line-height: 100px;
    color: #ffffff;
}

#sidebar
{
    float: left;
    width: 250px;
    background: #ccc;
    min-height: 100%;
}

#main
{
    float: left;
}
htmlcssheight
11
Steven Zezulak

あなたは悪名高い「偽の列」技術を探しています。これが チュートリアル です。

基本的に、単純な背景色ではそれを行うことはできません。繰り返し背景画像を使用する必要があります。

5
Iterate

この記事 で概説されている方法は、問題を解決するための非常に単純な方法であることがわかりました。

#sidebarと#main divを別のdivで囲む必要があるため、htmlコードは次のようになります。

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

そして、次のCSSはあなたが望むものに近い何かをします：

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

（少し調整して、たとえば、＃mainのh1のマージンは無視されているように見えましたが、＃sidebarのh1のマージンは無視されていませんでした！）.

12
Murray Jensen

低いIEを気にしない場合は、親でdisplay: tableを使用し、要素でdisplay: table-cellを使用します。これで一緒に高さが修正されます。ギャップについては、margin-top: -100 px; padding-top: 100px;を使用します

3
Madara's Ghost

これを試したかどうか、またはうまくいくかどうかはわかりませんが（コーディングは初めてです）、サイドバーを左にフロートさせ、コンテンツを右にフロートさせ、テキストを左に揃え、幅にパーセンテージを使用します。

#sidebar
    {
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
    }

#main
    {
float: right;
text-align: left;
width: 70%;
    }

他の設定がある場合は、それらに異なる方法でアプローチする必要がありますが、これでうまくいく場合があります。

1
Jeff
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

あなたはこのjqueryコードでそれを行うことができます。メインコンテンツの高さを呼び出します。

0
John Louie Biñas