1

この問題に関して Stackoverflow で非常によく似た質問を見てきましたが、私のシナリオで機能する解決策をまだ見つけていません。タイトルで述べたように、私は唯一の CSS ソリューションを探しており、Javascript を避けたいと考えています。

私の問題は、ページのヘッダーからページの下部まで伸びるコンテンツ ボックスを Web ページに作成する方法がわからないことです。このコンテンツ ボックスを拡張しようとしている理由は、Web サイトのランディング ページのコンテンツ ボックスの背景を画像で埋めるためです。2 つの異なる手法を試しましたが、どちらも正しく機能しませんでした。以下のフィドルを使用して両方のテストを添付しました。

シナリオ 1 - ラッパー内のヘッダーとコンテンツでページを拡張するラッパーを用意します。

HTML:

<div id="wrapper">
  <header>

  </header>
  <div id="content">
  </div>
</div>

CSS:

html, body { 
    padding: 0px;
    margin: 0px;
    min-width:1124px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    border: 3px solid black;
}
wrapper {
    min-height:100%;
    border: 3px solid blue;
    position:relative;
    padding:0;
    margin:0;
}

header {
    height: 155px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid black;

    /*Top Gradient Defined*/
    background: #ffc578; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}

#content {
    width: 100%;
    min-width: 1100px;
    position: relative;
    margin-right:auto; 
    margin-left:auto;
    min-height: 100%;
    height:100%;
    padding:0;
    border: 5px solid red;
    background-color:black;
    background-size:cover;
    position: relative;
}

シナリオ 1 のフィドル: http://jsfiddle.net/tPNB4/5/

ご覧のとおり、コンテンツ div はコンテンツの長さにのみ展開され、ラッパー div の全長には展開されません。

シナリオ 2: コンテンツをヘッダー div の下に配置します。

HTML:

<header>

</header>
<div id="content">
</div>

CSS:

html, body { 
    padding: 0px;
    margin: 0px;
    min-width:1124px;
    height: 100%;
    min-height: 100%;
    width: 100%;
    border: 3px solid black;
}


header {
    height: 155px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid black;

    /*Top Gradient Defined*/
    background: #ffc578; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}

#content {
    width: 100%;
    min-width: 1100px;
    position: relative;
    margin-right:auto; 
    margin-left:auto;
    min-height: 100%;
    height:100%;
    padding:0;
    border: 5px solid red;
    background-color:black;
    background-size:cover;
    position: relative;
}

シナリオ 2 のフィドル - http://jsfiddle.net/6MGrh/2/

ご覧のとおり、コンテンツ ボックスはページの長さを超えて拡張され、スクロール バーが生成されます。

これらのシナリオのどちらも機能しない理由について誰かが何らかのガイダンスを提供できれば、それは大歓迎です。

4

2 に答える 2

0

ヘッダーの高さをピクセル単位で指定し、それ以外はすべて % で指定していることに注意してください。余分な部分はページ全体で正確に 155 ピクセルであることに注意してください。contentヘッダーによって既に使用されているスペースを取るように指示したため、ヘッダーはすべてを下に押していました

新しいCSS:

html, body, div, header {
    box-sizing:border-box;
}
html, body {
    ....
    height:100%;
    ....
}
#wrapper {
    height:100%;
    ....
}
header {
    height: 20%;
    width: 100%;
    ....
    /*Top Gradient Defined*/
    .....
}
#content {
    .....
    height:80%;
    ....
}

これがjsFiddleの例です

于 2013-07-03T23:11:13.103 に答える