Question

我刚刚完成了对网站（IE9 +）的最后一刻设计更改。在没有详细介绍的情况下，大多数站点都位于堆叠容器中，这些容器具有最大宽度并使用可靠的margin 0 auto方法进行居中。该网站具有响应性，内容在屏幕大小上重新排列成多种不同的配置，并且由自定义布局和类似画廊的部分组成（多个媒体项目以多列网格排列）。

新设计添加了一系列整页（完全出血）水平规则，这些规则在各部分之间和图库行之间运行。显然，由于该站点是1.包含在一系列具有最大宽度和响应性的容器中，这是有问题的。我不想重做布局以适应本质上的装饰，并且考虑到不同的布局，我不相信如果没有大量额外的标记和体操，这甚至是可能的。

在尝试以各种方式解决此问题后，我最好的尝试是在需要规则的部分使用伪类：

  ::after {
    position: absolute;
    left: calc( (-100vw + 100%) * 0.5);
    bottom: 0;
    left: 0;
    width: 100vw;
    content: '';
    border-bottom: 1px solid black;
  }

这样做效果相当不错，但是当元素不是居中和100％宽度时，这是不好的，因为规则将是不平衡的。为不同的布局创建不同的值集很快就会出现问题。由于与视口单元和规范中的滚动条有关的一些非常可疑的决定（它基本上100vw是100％的窗口不允许滚动条，它也会在滚动条中表现不佳。这意味着只要内联（而不是重叠）滚动条出现，规则就会溢出滚动条的宽度。

一个很好的解决方案就是绝对定位一个左右设置为0的伪元素，但我无法保证在恢复工作时，主体将首次使用static以外的位置来自使用点的DOM。

鉴于使用延伸超过视口边缘的宽度会导致水平滚动问题无法通过在overflow-x: hidden或body上设置html来修复，是否有任何问题其他方法还是我必须沿着JavaScript路线走？

Answer 1

迟到，毫无疑问，但我认为box-shadow可能对此有所帮助，因为它不会强制溢出： http://codepen.io/pageaffairs/pen/NPrQJY

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

* {margin: 0; padding: 0;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.container {width: 80%; margin: 0 auto; height: 800px; background: #f7f7f7; }

.line {position: relative;}

.small {width: 50%;}

.container > div {background: #e7e7e7; height: 200px; margin: 20px 0;}

.line::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 100vw;
    right: 100%;
    height:2px;
    background:red;
    box-shadow: 100vw 0 red;
}

</style>
</head>
<body>

<div class="container">
    <div class="line"></div>
    <div class="line small"></div>
    <div></div>
</div>

</body>
</html>

Answer 2

有趣的问题。我有一点玩它，它可以用transform（虽然像calc和/或vw我不确定它会在IE9上运行得好）。

无论如何，这是我的尝试。在Mac上运行得很好，但臭IE11似乎需要身体overflow-x: hidden以防止水平滚动，但不确定原因。）

http://codepen.io/pageaffairs/pen/ogxdgg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

* {margin: 0; padding: 0;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body {overflow-x: hidden;}

.container {width: 80%; margin: 0 auto; height: 800px; background: #f7f7f7; }

.line {position: relative;}

.container > div {background: #e7e7e7; height: 200px; margin: 20px 0;}

.line::after {
    content: "";
    position: absolute;
    left:50%;
    right:0;
    bottom: -10px;
    width:100vw;
    height:2px;
    background:red;
    -webkit-transform:translate(-50%, 0);
    -moz-transform:translate(-50%, 0);
    -ms-transform:translate(-50%, 0);
    -o-transform:translate(-50%, 0);
    transform:translate(-50%, 0);
}


</style>
</head>
<body>

<div class="container">
    <div class="line"></div>
    <div class="line"></div>
    <div></div>
</div>

</body>
</html>

嵌套容器中的整页宽度规则

2 个答案: