0
私のデザイナーが望むのは、動的コンテンツの一番下から始まるフッタです（実際には、フッタはコンテンツ領域の下から約20ピクセル - それは別のものです）。問題は、ブラウザウィンドウのように拡大するグラデーションがあることです。CSSフッタW /グラデーション - スティッキーではない
グラデーションのために私はカンニングとウィンドウの色を黒色で宣言することはできません。また、フッターのサイズをグラデーションの高さに設定すると、スクロールバーになります。私は信じられないほど明白なものを見逃しているに違いないと感じていますが、私はちょうどそれを見つめています。
<body>
<div id = "page">
<div id = "header">
</div>
<div id = "content">
I am ze content area (for now)
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
</body>
body
{
background-color: grey;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px;
}
#header
{
background: url("http://kjunek.com/images/header_background.png") repeat-x;
color: yellow;
height: 240px;
}
#content
{
background-color: white;
}
#footer
{
background: #030a19 url("http://kjunek.com/images/footer_background.png") repeat-x 50% 0%;
height: 626px;
overflow: hidden;
color: white;
}
http://roughtech.com/t/oppsticky.htmlの種類などDoing the opposite of CSS Sticky Footerからのみ私は赤が黒にフェード勾配を持つウィンドウの一番下まで続けていきたいです。
ありがとうございます！
http://kjunek.com/images/footer_background.pngはグラデーションではありません。私が理解すればわからない。フッタ626pxの高さで、黒にフェードし、その下のすべてが黒でなければならないか、今日あなたはcss3計算を実行していますか？http://www.w3.org/TR/css3-values/#calc？現在のように、グラフィックをgradに切り替え、すべてのブロックに灰色から黒色のバックグラウンド・スイッチのボディー・バックグラウンドがあるためです。ページの高さは866ピクセル=（249ピクセル+ 626ピクセル）+コンテンツで使用される領域です。 1600x1200未満の解像度のシステムではスクロールバーが表示されます。 – Wayne
a） "http://kjunek.com/images/footer_background.pngはグラデーションではありません"という意味ではないかどうかは、ネイビーからほぼブラックになるグラデーションであるpngです。 – kbertrand
b）明確にするために、私はいつも勾配の626ピクセルすべてが表示されることを望んでいません。ビューポートの高さが800ピクセルしかない場合は、フッターの表示に560のグラデーションが必要です。ヘッダー（240）+コンテンツ（x）+フッターコンテンツ（y）>ビューポートの高さの場合、フッターはフッターの内容と同じくらい大きくなります。ヘッダー（240）+コンテンツ（x）+フッターコンテンツ（y）<ビューポートの場合、フッターはビューポートの高さ - ヘッダーの高さ - 内容の高さになります。626pxはグラデーションになります。 Calcは、ブラウザの最後の2つの主要なリビジョン（IE8、IE7など）をサポートする必要があるため、動作しません。 – kbertrand