Question

如何构建一个包含不同页面的单页网站，每个页面的宽度为100％，高度为100％？我的第一个解决方案是固定值，但我希望它可以缩放到屏幕大小。这样每个页面都有屏幕大小。请注意，它必须是“一页”，因此页面将在彼此之下。

感谢您的帮助！

Answer 1

取决于您希望如何构建它并调整其大小。它是否有响应？如果是这样，请确保使用支持它的框架。

此外，请在CSS

中开始，如下所示

body, html              {height: 100%;width: 100%;}

这将始终将您的屏幕填满整个身体100％。现在为你的第二个问题。你想填写每一页？因为你在那里迷了我。内容是可变的，因此总是不能适应100％的高度和宽度（想想智能手机，你有时需要滚动，因为智能手机的像素宽度和高度有限）

我建议您的网页应该是部分，并将它们放在我的正文标记中。然后每个部分都是一个不同的元素，你可以从你的菜单中调用它们（我想你要在菜单中滚动然后向下），这样只需给它们一个ID，页面就会在JQuery或JavaScript的帮助下跳转到它。 / p>

在此页面上执行代码检查以了解我的意思：http://www.jellyfishwebdesign.nl/Joost/index.php

Answer 2

将height:100%提供给 html，正文＆amp;您的页面容器。

Answer 3

我认为这个CSS解决方案已经足够了..

<body>
  <section id="one">
  </section>
  <section id="two">
  </section>
  <section id="three">
  </section>
</body>

CSS：

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

#one {
   min-height:100%;
   position:relative;
}

#two {
   min-height:100%;
   position:relative;
}

#three {
   min-height:100%;
   position:relative;
}

Answer 4

这是您需要的代码：

<!DOCTYPE html>
<html>
<head>
    <style>
    body { margin: 0; padding: 0; }
    #parent { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
    #parent div { height: 100%; width: 100%; }
    #parent div:nth-child(1) { background: red; }
    #parent div:nth-child(2) { background: green; }
    #parent div:nth-child(3) { background: blue; }
    #parent div:nth-child(4) { background: orange; }
    </style>
</head>
<body>
    <div id="parent">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

＃parent中的div都有100％的高度。即使你调整屏幕大小。在Chrome，IE和Firefox上测试过它。

页面总是100％高度和100％宽度

4 个答案: