Question

我的页面分为部分标签，其行为类似于网站有多个页面。我的问题是我不能让每个部分都有100％的窗口高度，~~并且不知何故部分之间存在间隙~~。

我希望我可以在没有任何JavaScript和使用百分比的情况下解决这个问题，因此它会更流畅。

以下是我的网页HTML的大致内容：

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

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

完整的HTML＆amp;样式可以在http://theailona.com/doaibu

找到

编辑：由于Gopikrishna＆amp; amp; Praveen Kumar

Answer 1

CSS修复：

这是因为margin <h1>标记。在CSS中更新此内容。此外，margin <p>标记会为您提供空白区域。

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

替代解决方案：

#wrapper > section {overflow: hidden;}

Answer 2

尝试添加溢出：隐藏部分...请按照下面提到的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;
}

Answer 3

在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%;
}

Answer 4

请将html，body和section的高度更改为'100％'...所以你的css看起来像

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

我尝试使用chrome，它对我很有用:)希望这会对你有所帮助:)）

如何制作具有100％窗口高度的部分

4 个答案:

CSS修复：

替代解决方案：