有没有可能有一个位置绝对div，里面有固定元素，响应式地上下放大？

Question

我目前有一个相对位置的容器，里面有一个绝对位置的div，里面有固定的div元素。

根据浏览器的大小，可以使位置绝对/固定div上下缩放吗？

Answer 1

您可以使用@media CSS更改特定屏幕尺寸的元素类的大小（宽度，高度，顶部，底部等）的值。

@media only screen and (max-width:1100px) { 
    .yourClass {yourStyle: style} 
    .otherClass {yourStyle: style} 
} 
@media only screen and (max-width:570px) { 
    .yourClass {yourStyle: style} 
    .otherClass {yourStyle: style} 
} 

Answer 2

根据你的问题，你可以使用宽度：“calc”css技巧来修复宽度;这将使自动响应运行该片段。下面是现场小提琴也fiddleLiveDemo

.container{ 
 
    height:100px; 
 
    position:relative; 
 
    border:1px solid red; 
 
} 
 
.div1{ 
 
    border:1px solid blue; 
 
    background:#bbb; 
 
    position: absolute; 
 
    left: 40px; 
 
    width: calc(100% - 80px);/* 40px gap between both sides of the div and the edges of the window */ 
 
    height:80px; 
 
    margin-top:10px; 
 
} 
 
.div2{ 
 
    border:1px solid yellow; 
 
    background:red; 
 
    position:fixed; 
 
    left: 60px; 
 
    width: calc(100% - 120px); /* 60px gap between both sides of the div and the edges of the window */ 
 
    height:70px; 
 
    margin-top:5px; 
 
} 
 

 

<div class="container"> 
 
<div class="div1"> 
 
    <div class="div2"> 
 

 
    </div> 
 
</div> 
 
</div>