可以使固定位置的div响应吗？

Question

我一直在尝试使一些SVG数据图表具有响应性，但似乎无法使用当前应用于元素的CSS 'position:fixed‘做到这一点。

我正在寻找一个解决方案，如果可能的话，不依赖于媒体查询，因为我有多个元素，我将需要应用这一点。如果这是不可能的，那么任何关于如何在浏览器调整大小时保持所有数据与SVG匹配的建议都是很棒的！

理想情况下，我希望SVG可以放大和缩小大小，同时保持中心，无论浏览器的大小是什么。

这是我希望使其具有响应性(右侧) http://datahealthcheck.databarracks.com/2016/#backup-section-3的SVG之一

我已经创建了一个代码，并在SVG上添加了一个百分比作为问题http://codepen.io/anon/pen/YGvXkq的示例。

<div id="Backup-3"></div>
<p id="percentage" class="backup3-percentage">3%</p>

#Backup-3 {
  position: fixed;
  width: 550px;
  margin-left: 73px;
  margin-top: 31px;
}

.backup3-percentage {
  position: fixed;
  color: #000;
  margin-left: 478px;
  margin-top: 96px;
  font-size: 1em;
  transform: rotate(6deg);
}

Answer 1

我会选择viewport units

.responsive-div {
    position: fixed;
    width: 70vw; // vw being viewport-width, so 70% of the width of the viewport
    height: 50vh; // vh being viewport-height, so 50% of the height of the viewport
}

这篇article将对此进行更深入的探讨

Answer 2

​

body{ margin:0; padding:0; 
   }
.mydiv { 
  max-width:1800px; 
  width:100%;
  position:fixed; background:red;  height:100px; border:5px solid green;    box-sizing: border-box;}

<div class="mydiv">
</div>

​

我认为媒体查询将是使div响应的最好方法。

如果没有，您可以使用with:100%和max-width来定位固定分区

Answer 3

最大宽度不适用于位置:已修复。这是我的选择：

`.nav{
   width: 1280px;
   position: fixed;
 }
 @media all and (max-width: 1280px) {
   .nav{
    width: 100%;
   }
 }`

如果你使用的宽度没有@media 100%你的区块