3

Web サイトに複数のページがあるように機能するセクション タグにページを分割しました。私の問題は、各セクションをウィンドウの高さの 100% にすることができず、何らかの形でセクション間にギャップがあることです。

JavaScript を使用せずにパーセンテージを使用してこれを解決できれば、より流動的になります。

以下は、私のページの HTML がどのように見えるかを大まかに示しています。

<div id="nav">
  navigation code here
</div>

<div id="wrapper">
  <section>content</section>
  <section>content</section>
  <section>content</section>
</div>

完全な HTML とスタイルは、http://theailona.com/doaibuにあります。

編集: Gopikrishna と Praveen Kumar のおかげでギャップが解決されました

4

4 に答える 4

1

CSS 修正:

marginof<h1>タグのせいです。CSS でこれを更新します。また、marginof<p>タグは空白を提供します。

h1 {margin: 0;}
.content {overflow: hidden;}

代替ソリューション:

#wrapper > section {overflow: hidden;}
于 2012-11-28T05:35:27.540 に答える
0

CSS で次の高さプロパティを設定します。

body {
    height:800px;
}

#wrapper, #welcome, #about, #service, #price, #clients, #contact {
    height:100%;
}

の高さをピクセル単位で任意の高さに変更できbody、div/section 要素はその高さの 100% まで拡大されます。

編集済み

html,body {
    height:100%;
}

#wrapper, #welcome, #about, #service, #price, #clients, #contact {
    height:100%;
}
于 2012-11-28T06:02:15.850 に答える
0

Pls は html、body、および section の高さを '100%' に変更します...だから、あなたの css は次のようになります

html{
  height:100%;
}
body{
  height:100%;
}
section {
  min-height: 65%;
  padding: 0 0 100px 0;
  height: 100%;
}

私はクロムで試してみましたが、うまく機能します:)これが役立つことを願っています:)

于 2012-11-28T06:27:31.707 に答える
0

セクションにoverflow:hiddenを追加してみてください...以下のCSSに従ってください問題が解決することを願っています...

#welcome, #service, #clients 
{
    background: url("diamond-pattern.jpg") repeat scroll 0 0 transparent; 
    overflow: hidden;
}

#about, #price, #contact 
{
    background: none repeat scroll 0 0 #B8282E;
    overflow: hidden;
}
于 2012-11-28T05:36:19.240 に答える