25

我怎样才能让网站自动适应页面？

这是一个不需要滚动的横向设计。

4

3 回答 3

23

您应该设置bodyandhtml到position:fixed;，然后设置right:, left:, top:, and bottom:to 0;。这样，即使内容溢出，它也不会超出视口的限制。

例如：

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

CSS：

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

JS 小提琴示例

警告：使用这种方法，如果用户缩小他们的窗口，内容将被切断。

于 2013-10-05T19:22:32.020 回答
13

如果它在风景中，那么您将需要更多的宽度和更少的高度！这正是所有网站所拥有的。

让我们先来一个基本的，然后是其余的！

基本的CSS：

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

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

在这里，您使用的是带有idbody 的 div，如下所示：

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

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

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

问题出现了，如果他尝试调整窗口大小怎么办？然后里面的所有元素#body都会试图弄乱用户界面。为此，您可以这样写：

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

只需添加min-height max-height min-widthand 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 查找当前屏幕大小并编辑页面！:)

于 2013-10-05T19:33:34.227 回答
7

例如，您可以使用 CSS 来做到这一点

<style>
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:#DDD;
}
</style>
于 2013-10-05T19:20:45.000 回答