我正在尝试创建一种从其父容器中泄漏元素的方法。
我正在使用max-width
和margin: auto
让容器居中。
子元素有position: relative
并使用left + translateX transform
成为居中。
CSS工作正常,直到页面滚动(内容高度高于屏幕高度)。
此垂直滚动也会生成水平滚动。
我能够使用overflow-x: hidden
隐藏它但我真的想知道为什么我会得到水平滚动?
也许是因为变换?代码如下(全屏查看):
.leaked {
position: relative;
left: 50%;
transform: translatex(-50%);
width: 100vw;
margin: 0;
overflow: hidden;
}
.container {
padding: 0 20px;
margin: 0 auto;
max-width: 960px;
position: relative;
}
/* EXTRA */
.block {
padding: 20px 0;
background: darkred;
color: white;
}
body {
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
text-align: center;
color: gray;
font-size: 0.8em;
}
.force-scroll {
height: 100vh;
}
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
答案 0 :(得分:1)
这是.leaked的宽度。我将宽度从100vw
更改为100%
,图片尺寸减小,因此现在可以放入容器中。
.leaked {
width: 100%;
//other styles
}
但是如果你确实希望泄露的内容全宽,你需要更改你的html结构,以便.leaked部分不在容器内,这样它将全宽:
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
</article>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<article class="container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
</article>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<article class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
答案 1 :(得分:1)
视口百分比长度是相对于初始包含块的大小。当初始包含块的高度或宽度改变时,它们相应地缩放。
但是,当根元素上的溢出值为auto时,任何 假设滚动条不存在。
所以没有js就没有办法在没有滚动条的情况下获得宽度:(