页面始终为100％高度和100％宽度

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

感谢您的帮助！

来源

2014-06-16 Tbmluijten

目前还不清楚你在问什么。你问是否有可能？是的。但是你真的想知道什么？ – doctororange

“一页”如何能成为浏览器窗口高度的100％？ – Justinas

你想要一个页面的多页网站？你关心的是高度和宽度？ – Anthony

这是你需要的代码：

<!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>

的＃里面的div父母都有100％的身高。即使您调整了屏幕大小。在Chrome，IE和Firefox上进行测试。

来源

2014-06-16 08:27:47

这是我非常想找的！非常感谢您的先生！ – Tbmluijten

没问题:)你能标记它作为接受答案通过点击“检查”标志？会帮助其他人有同样的问题。谢谢 –

当然，我会做到这一点;-) – Tbmluijten

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

而且，一开始是在你的CSS

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

这下面将永远填补你的屏幕为100％，与身体。现在为你的第二个问题。你想填写每个页面？因为你在那里失去了我。内容是可变的，因此无法始终适合100％的高度和宽度（想想智能手机，由于智能手机的像素宽度和高度有限，您必须有时滚动）

我建议您的网页应为，并将它们放在我的身体标签中。然后每个部分都是一个不同的元素，你可以从你的菜单中调用它们（我假设你想在菜单中向下滚动），所以简单地给它们一个ID，页面将在JQuery或JavaScript的帮助下跳转到它。

在此页面上codecheck，看看我的意思是：http://www.jellyfishwebdesign.nl/Joost/index.php

来源

2014-06-16 07:37:08 Dorvalla

给height:100%到HTML，身体 &您页容器。

来源

2014-06-16 07:37:59 demonofthemist

我觉得这个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; 
}

来源

2014-06-16 07:57:49 Patrick

页面始终为100％高度和100％宽度

回答

相关问题