无法使<body>元素覆盖整个页面

Question

无法使<body>元素覆盖整个页面

7

这里的目标是让侧边栏覆盖整个页面高度。现在，#side没有设置height属性，但它确实像期望的那样跨越整个body元素（当我将高度设置为100%时，它并没有跨越整个body元素...）。因此，问题似乎在于#side的父元素body没有跨越整个页面。

我已经尝试了（感觉上）数百种不同的HTML元素和body元素的高度选项，但没有任何效果。如下图所示，这是我最接近body元素跨越整个页面高度的情况。

一些事情：

- 我有一个固定的背景图片，它确实覆盖了整个页面。我不确定这是否与我遇到的问题有关。 - HTML元素的大小与下图中突出显示的body元素相同 - 我已经尝试将body和HTML的min-height和height属性设置为100％以及100vh和120vh。 - body和HTML都没有任何边距或填充。 - 我发现类似的问题发布过，但没有任何解决方案可以解决我的问题。

这是我目前拥有的内容：

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    /* I have also tried height: 100%; */
}

body {
    display: flex;
}

#side, #header-content {
    /* no specified height because I found it somehow made the divs shorter? */
    display: flex;
}

正文包含两个div，#side和#header-and-content。我不确定flexbox是否与此有关...附加的CSS在附图右下角可以看到，用于设置正文元素的背景图片。如果有其他相关代码需要发布，请告诉我！谢谢！:)

编辑：HTML分布在几个不同的文件中，因此这里是浏览器的屏幕截图（是的，我可能不需要对我的文件路径进行审查，但我在工作中使用服务器，并且我一直很担心）。

因为时间紧迫，以下是相关CSS的截图：

更新：对我起作用的唯一方法是将所有内容注释掉，逐个添加元素和样式...甚至无法告诉您最终问题是什么。

- Hannah Smith

3

HTML和BODY的高度应该设为100%，而不是最小高度（min-height）。 - symlink

2

如果您能在帖子中分享一些相关的 HTML 和 CSS 代码，或者使用 jsfiddle (https://jsfiddle.net/) 或类似工具创建一个代码链接，那将会很有益处。 - chris

@symlink 我试过了，但不知何故没有任何改变 :/ - Hannah Smith

你已经用哪个浏览器测试过了？这只是一个浏览器的问题还是普遍存在的？如果仅限于某一个浏览器，那很可能是该浏览器代码中的小故障。 - Robidu

@A.Meshu - 我确实尝试过那个方法，但仍然遇到了相同的问题 :-) 我想我会尝试另一个用户的建议，将所有内容都注释掉，然后逐一添加。:-)))))) - Hannah Smith

显示剩余2条评论

4个回答

1

首先需要理解的是，除了body标签以外的元素也可能导致整个页面出现偏差。事实上，通常情况下是其他元素引起了body标签内部的问题。请记住，body中的所有元素都是body的子元素，它们会影响body元素。首先按照建议将body设置为CSS中我认为是body标签的Web标准。

body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

如果您仍然遇到问题，那么您需要仔细检查并确保不是您使用的设备/显示器导致了问题。通过第二个设备加载页面，看看是否得到相同的结果。如果您没有另一个设备，则可以使用Mozilla的Dev-Edition Firefox模拟器来测试该网站。如果您仍然遇到问题，我发现目前最常见的问题是边框。边框会威胁到页面的主体，因为它们包裹在元素的外部。这里有一个例子来说明我的意思：

如果您将块div设置为100％并包装一个边框设置为...

border: 1px solid #111;

在其周围，您的div实际上将等于（100％+ 2px）。这将导致页面出现几个像素的偏差。根据您的浏览器，因为不同的浏览器处理事物的方式不同，它可能会在左侧或右侧出现偏差。因此，请检查边框，也许尝试暂时删除它们。接下来检查边距。当涉及到像您这样的问题时，边距是主要罪犯，它们可能会导致页面向左或向右移动，特别是如果元素已经达到100％的宽度。最后，请检查任何宽度设置为自动的元素。即使您没有将元素的宽度设置为自动，许多元素默认设置为自动。当一个元素自动增长时，它有可能增长到足以使屏幕稍微移动的大小。

最后，如果您变得绝望，作为最后的手段，您可以删除每个元素，并逐个将它们添加回页面，直到找到罪魁祸首。如果您无法解决问题，我建议采用这种方法，因为它将帮助您了解问题并深入了解该问题。
- 祝你好运--AFT3RL1F3

- JΛYDΞV

0

我使用CSS添加了背景图片，并使用background-size来覆盖整个屏幕。我创建了一个示例，希望它能帮到你。

body{ 
display: flex;
background: url("https://drive.google.com/uc?id=1rfyCzcFPIQWylTF1nojkExMLvuogMmKU") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

.header-content{ display:flex; }

<html>
<head>
<title>Nooo</title>
</head>
<body>

  <div class="header-content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  
  </div>


</body>
</html>

- Marios Nikolaou

0

将min-height替换为以下任一选项-

height: 100%;
height: 100vh;

除此之外，一切都很好。

- monkey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user12629985 · Accepted Answer

通过将margin和padding属性值设置为0，以及将height属性的值设置为100vh来设置Body Element的样式。

body{
 height: 100vh;
 margin: 0; 
 padding 0;
}

最后，使用 height 属性将 Body 标签设置为 100vh，以此方式来设置 viewport 的大小

body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

不要使用通用选择器 (*)。这样做会导致选择其他具有与 body 相同属性值的元素，从而完全破坏您的代码。