1

だから話はこれです：

ホームページのコンテンツがメニューとクライアントのロゴで構成される Web サイトを作成しています。しかし、私の設計では、コンテンツはブラウザ ウィンドウの中央に配置する必要があります。 、またはコンテンツの一部が途切れている。

これはウェブサイトです: http://thinkinternational.co/

それを修正するための私の考えはこれでした：以下のコードでわかるように、ボディの上にバッファゾーンを作成しましたが、divの高さとしてパーセンテージを持つことで発見した問題は、親divが持つ必要があるということですそもそも特定の高さ。残念ながら、私は全知ではなく、この Web サイトを閲覧するすべての人の画面サイズを予測することはできません。そのため、特定の高さを指定することはできません。最初の場所。

また、同時に背景も体と一緒に下にシフトする必要があります。物事を揺さぶるためだけに。

この問題の解決策はありますか??

<div id="main">
  <div id="TopBuffer"></div>
  <div id="body" class="clearfix">
      Content Here
  </div>   
</div>


body {
    background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
    -moz-background-size: inherit;
    -o-background-size: inherit;
    -webkit-background-size: inherit;
    background-size: inherit;
    height: 100%; }

main { color:#000; font-family:Arial,Geneva,sans-serif; margin:15px 0;height: 100%; }

TopBuffer { width:100%; height:25%; }
4

2 に答える 2

2

あなたが言ったように、パーセンテージで高さを機能させるには、親に特定の高さが必要です。あなたもそれheight:100%をbody着たら動作しhtmlます。（マージンとパディングも削除しますhtml）

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

背景を下まで伸ばすには、CSS の次の行を変更する必要があります。

body{
    background:#0b0b0b url(images/Slices/BackgroundHome.jpg) no-repeat center -150px fixed;
}

より高い解像度で画像全体を表示できるように、好みに応じて、 、または に変更しcenter -150pxます。center centercenter topcenter bottom

1centerつ目は背景の水平位置、2 つ目は垂直位置です。

コンテンツを垂直方向にセンタリングすることに関しては、これは素晴らしい記事です:

CSS による垂直方向のセンタリング

于 2012-07-20T10:14:30.357 に答える
0

javascript を使用できる場合は、window.outerHeight を使用してブラウザーの高さを取得し、javascript または jquery を使用してそれに応じてバッファーを設定します。

于 2012-07-20T10:14:22.120 に答える