3

我将我的页面划分为部分标签，就像网站有多个页面一样。我的问题是我不能让每个部分都有 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操作，希望您的问题能够解决...

#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 回答
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

请将 html、body 和 section 的高度更改为“100%”......所以你的 css 看起来像

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

我已经尝试过使用 chrome，它对我来说很好 :) 希望这对你有帮助 :)

于 2012-11-28T06:27:31.707 回答