20

ウィンドウの高さの 100% になるサイドバーが欲しいだけですが、これ以外は何も機能しません。

#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}

position: fixed私は水平方向にスクロール可能なコンテンツを持っているので、固定部分が固定されたままになるので、したくありません。

relativeおそらくまたはabsolute位置で、そのようなことを行う方法はありますか？

ここに、テストと説明のための簡単な Fiddle があります: JSFiddle

4

5 に答える 5

44

新しい非常に便利な I-can't-imagine-what-took-W3C-so-long vhCSS ユニットを使用できます。

height:100vh;
于 2014-03-23T21:02:57.793 に答える
36

tl;drhtml, body {height:100%;} - CSSに追加します。

CSS のパーセンテージ値は、すでに高さが宣言されている祖先から継承されます。あなたの場合、サイドバーのすべての親に 100% の高さを指定する必要があります。#sidebarBackの直接の子であると仮定していbodyます。

基本的に、上記のコード#sidebarBackは、親の高さが 100% であることを示しています。その親 (想定) はであるため、同様に設定するbody必要があります。しかし、それだけではありません。は から高さを継承するため、も設定する必要があります。はからそのプロパティを継承しているため、ここで終了できます。これは、既に宣言された高さがです。height: 100%;bodybodyhtmlheight: 100%;htmlhtmlviewport100%

これはまた、#sidebar別の を内側に配置することになった場合div、それdivも が必要であることを意味しますheight:100%;。

これは更新された JSFiddleです。

CSS を次のように変更しました。

html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}
于 2012-11-28T16:19:03.890 に答える
7

最初に、コンテンツのサイズに縮小するのではなく、ウィンドウを埋めるように body 要素に指示します。

body { position: absolute; min-height: 100%; }

min-heightの代わりにを使用するheightと、コンテンツがウィンドウよりも長い場合に、ウィンドウの高さを超えて body を拡張できます (つまり、必要に応じて垂直方向にスクロールできます)。

次に、「#sidebar」を に設定しposition:absolute、 を使用top:0; bottom:0;して親要素の垂直方向のスペースを強制的に埋めます。

#sidebar {
    position: absolute;
    top:0; bottom:0;
    left: 0;
    width: 100px;
    background: rgba(20, 20, 20, .3);
}

いくつかの jsFiddles を次に示します。

ご覧のとおり、両方の例で、「#settings」セクションの幅設定を保持しているため、水平スクロールが要求どおりに機能することが示されています。

于 2012-11-28T17:01:09.003 に答える
1

以下を試してください

#sidebarBack {
 background: rgba(20, 20, 20, .3);
 position: fixed;
 width: 250px;
 top:0;
 bottom:0;
 left: 0;
}
于 2012-11-28T16:21:49.297 に答える
0

これを試して -

html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}


section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}

</p>

于 2012-11-28T16:25:30.107 に答える