Ist es möglich, eine feste Position div ansprechen zu lassen?

Question

Ich habe versucht, einige SVG-Datentabellen ansprechend zu machen, aber anscheinend nicht in der Lage, dies zu tun, wenn die aktuelle CSS-Position "fixed" auf die Elemente angewendet wird.

Ich suche, wenn möglich, eine Lösung, die nicht auf Medienabfragen angewiesen ist, da ich mehrere Elemente habe, auf die ich dies anwenden müsste. Wenn das nicht möglich ist, dann wären alle Vorschläge, was zu tun ist, um alle Daten, die mit dem SVG übereinstimmen, wenn der Browser in der Größe verändert wird, großartig!

Idealerweise möchte ich, dass das SVG in der Größe nach oben und unten skaliert wird, während es zentral bleibt, unabhängig von der Größe des Browsers.

Dies ist einer der SVGs, die ich bin auf der Suche nach ansprechender (rechter Seite) http://datahealthcheck.databarracks.com/2016/#backup-section-3

Ich macht habe eine codepen erstellt und habe soeben ein Prozent auf der SVG als ein Beispiel für das Problem 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

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>

ich dünn k Medienabfragen wären der beste Ansatz, um das div ansprechbar zu machen.

Wenn nicht Sie with:100% und max-width zu Ihrer Position fixiert div

Answer 2

verwenden kann ich mit 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 
} 

gehen würde Dieses article wird mehr in die Tiefe gehende Informationen