1

このウェブサイトがどのようにスタイリングされているかを調べています (http://hairproject.ch/fr/)。ブラウザのサイズに関係なく、ヘッダー画像がビューポートの 100% をカバーするというアイデアが気に入っています。ただし、下にスクロールして別のセクションに移動できます。

その CSS を再作成しようとしていますが、最終的には次のようになります。

header {            
    display: block;         
    background-image: url(background_03.jpg);           
    background-repeat: no-repeat no-repeat;         
    background-size: cover;         
    height: 100%;           
    width: 100%;            
    position: absolute;         
    left: 0;            
    top: 0;
}

これにより、画像がビューポート全体をカバーしますが、絶対配置により、通常のワークフローからそのヘッダーが取り除かれ、他のセクションがその下に配置されます。

助けてください。

4

1 に答える 1

1

ヘッダーの親要素には、固定の高さ (現在、私の画面では 402px) と相対位置があります。これが、コンテンツがヘッダーの下に落ちる原因です。

<div id="banner" style="height:402px;">

サイトは JS を使用して、この高さを正しく維持しています。

スクリプトソース: http://static.hairproject.ch/js/script.js

関心のあるコード:

// Figure out browser width/height and ajust main picture -------------------------------------------------
var width  = $(window).width();
var height = $(window).height();
if ((width > 320) && (width <= 480)) { height = height + 240; }
else if (width <= 320) { height = height + 80; }
var margintop = Math.round((height/3) - 120);
$("body.home #banner").attr("style","height:" + height + "px;");
$("body.home h2").attr("style","margin-top:" + margintop + "px");

$(window).resize(function() {
  // $('#log').append('<div>Handler for .resize() called.</div>');
  var width  = $(window).width();
  var height = $(window).height();
  if ((width > 320) && (width <= 480)) { height = height + 240; }
  else if (width <= 320) { height = height + 80; }
  var margintop = Math.round((height/3) - 120);
  $("body.home #banner").attr("style","height:" + height + "px;");
  $("body.home h2").attr("style","margin-top:" + margintop + "px");
});
于 2012-09-30T13:10:16.460 に答える