Question

我正在尝试修复宽度为50vw的div。但是，当我修复div时，50vw的作用就好像是100vw一样。

在下面的示例中，要获得我想要的效果，我必须制作target 25vw而不是50vw。 100vw的宽度大于屏幕的宽度。

这里是jsfiddle。蓝色的.target容器应为黄色容器的宽度的一半。

<div class="main">
    .
    <div class="content"> 
        <div class="content-wrapper">
            <div class="target-containers">
                <div class="target">. </div>     
            </div>
        </div>
    </div>  
</div>

CSS

html, body {      
  margin: 0;
  width:100%;
  height: 100%;
}

body {
  background-color:gray;
}

.main {
  background-color: yellow;
  min-height:100vw;
  position:relative; 
  margin-left: 25%;
  margin-right:25%;
}

.content-wrappers {
    position:relative;
}

.target-containers {
    position:relative;
}

.target { 
    min-width:50%;
    width:50%;
    position:fixed;
    float:left;
    background-color:blue; 
}

Answer 1

请阅读有关position: fixed.

的信息

相对于由视口建立的初始包含块定位，除非其祖先之一的transform，perspective或filter属性设置为非none

谁是初始包含块？（编辑以清除this comment）

请阅读有关identifying the containing block

的信息

注意：根元素（）所在的包含块是一个称为初始包含块的矩形。它具有视口（用于连续媒体）或页面区域（用于分页媒体）的尺寸。

请阅读有关position: sticky

的信息

粘性放置的框的位置与相对放置的框的位置类似，但是偏移量是使用滚动框参照最近的祖先，如果没有祖先具有滚动框，则参照视口进行计算。

您可以像这样将位置值更改为粘性

.main {
    background-color: yellow;
    max-height:100vh;  
    min-height: 100vh;
    margin-left: 25%;
    margin-right:25%;
    overflow-y: auto
 }

 .target{ 
    min-width:50%;
    width:50%;
    position:sticky;
    background-color:blue;
    top: 0;
 }

Fiddle Example

Answer 2

如果您创建元素position:fixed，它将使其脱离文档流。

如果删除position: fixed，则它会像从父元素继承一样正常工作。

https://jsfiddle.net/k460abmv/

固定div宽度比屏幕宽

2 个答案: