如何让页面自动适合窗口？

Question

我刚刚为朋友开始了我的第一个正确的HTML网站,我想知道如何让网站自动调整页面？

这是一个不需要滚动的景观设计.

Answer 1

你应该设置body和html到position:fixed;,然后设置right:,left:,top:,和bottom:到0;.这样,即使内容溢出,它也不会超出视口的限制.

例如:

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS:

html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

警告:使用此方法,如果用户缩小窗口,内容将被切断.

Answer 2

如果它在景观中,那么你将需要更多的宽度和更少的高度!这就是所有网站都有的.

让我们先做一个基本的,然后是休息!

基本的CSS:

通过CSS你可以做到这一点,

#body {
width: 100%;
height: 100%;
}

在这里你使用div与idbody,如:

<body>
  <div id="body>
    all the text would go here!
  </div>
</body>

然后你可以有一个100%高度和宽度的网页.

如果他试图调整窗口大小怎么办？

弹出的问题,如果他试图调整窗口大小怎么办？然后里面的所有元素#body都会试图搞砸UI.为此你可以这样写:

#body {
height: 100%;
width: 100%;
}

只需添加min-height max-height min-width和max-width.

这样,页面元素将保留在页面加载的位置.

使用JavaScript:

使用JavaScript,您可以控制UI,使用jQuery:

$('#body').css('min-height', '100%');

以及所有其他剩余的CSS属性,当用户尝试调整窗口大小时,JS将负责用户界面.

如何不向网页添加滚动:

如果您不想添加滚动,那么您可以使用此JS

$('#body').css('min-height', screen.height); // or anyother like window.height

这样,只要用户加载页面,文档就会获得新的高度.

第二个选项更好,因为当用户具有不同的屏幕分辨率时,他们会想要为自己的屏幕创建CSS或样式表.不适合他人!

提示:所以尝试使用JS查找当前屏幕大小并编辑页面!:)

Answer 3

您可以使用CSS来举例说明

<style>
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:#DDD;
}
</style>