切换到移动设备时Html正文未采用全宽
切换到移动设备时Html正文未采用全宽
提问于 2018-08-14 02:00:31
我有一个响应式的网页，这在pc视图上运行良好。问题是，当我作为移动设备进行检查时，html只显示了3/4的屏幕。我知道哪个CSS类导致了这个问题，但是我不知道为什么(特别是因为这个类只影响一个部分)，没有它，整个部分就消失了。有没有人知道它为什么会发生或者如何修复它？
进一步搜索发现，导致问题的物业是：
.rl-section:before {
position: absolute;
content:'';
}
然而，我不知道如何以一种不会导致任何东西崩溃的不同方式来做这件事。
代码：
<style type="text/css">
.rl-section {
position: relative;
}
.rl-section:before {
position: absolute;
content:'';
}
.rl-diagonal {
z-index: 1;
padding: 3em;
}
.rl-diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: -3% 0;
transform-origin: -3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
</style>
<style type="text/css">
.lr-section {
position: relative;
}
.lr-diagonal {
text-align: center;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.lr-content {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.lr-section:before {
position: absolute;
content:'';
}
.lr-diagonal {
z-index: 1;
padding: 3em;
}
.lr-diagonal:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: -3% 0;
transform-origin: -3% 0;
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
}
</style><section>
<div class="first-section" style="padding: 5px 5px 15px; height: 500px;">
<div class="row">
<div class="col s6">
<img src="#">
</div>
<div class="col s6">
<p class="center-align">text</p>
</div>
</div>
</div>
<div class="lr-diagonal lr-section" style="background-color:blue">
<div class="lr-content">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</div>
<div class="rl-diagonal rl-section" style="background-color:black;">
<div class="lr-content">
<img src="#">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
</div>
</section>
谢谢你的帮助！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-14 03:03:09
我相信我理解你的问题所在，但我可能完全说错了。给你的身体添加overflow-x: hidden能解决你的问题吗？
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}Stack Overflow用户
发布于 2018-08-14 03:39:52
Body take的8px边距，这就是为什么它不是全宽的原因。谢谢
body{
margin: 0px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51828085
复制相关文章
相似问题