如何在正文元素中获得全宽[关闭]

Posted 2023-03-05

技术标签:

【中文标题】如何在正文元素中获得全宽[关闭]【英文标题】：How to get full width in body element [closed] 【发布时间】：2013-10-12 15:52:34 【问题描述】：

如何让网站自动适应页面？

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

【问题讨论】：

【参考方案1】：

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

<style>
html
    width:100%;
    height:100%;

body
    width:100%;
    height:100%;
    background-color:#DDD;

</style>

【讨论】：

背景色只是给你看【参考方案2】：

您应该将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;

JS Fiddle Example

警告：使用此方法，如果用户将窗口缩小，内容将被截断。

【讨论】：

我在缩小窗口时遇到了同样的问题，我不希望内容被切断，而是适合窗口高度。我该如何解决？【参考方案3】：

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

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

基本 CSS：

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

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

这里你使用了一个带有id body的div，如：

<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 查找当前屏幕尺寸并编辑页面！ :)

【讨论】：

以上是关于如何在正文元素中获得全宽[关闭]的主要内容，如果未能解决你的问题，请参考以下文章