固定位置divを応答させることは可能ですか？

Question

私はいくつかのSVGデータ・チャートを反応させようとしていますが、現在のCSSの「固定：fixed」という要素では対応できません。

私はこれを適用する必要がある複数の要素があるため、可能であれば、メディアクエリに依存しないソリューションを探しています。これが不可能な場合は、ブラウザのサイズが変更されたときにSVGと一致するすべてのデータを保持するために何をすべきかについての提案があれば大丈夫です！

理想的には、ブラウザのサイズにかかわらず、SVGのサイズを上下に拡大したいと考えています。

これは私がcodepenを作成し、問題http://codepen.io/anon/pen/YGvXkqの一例として、SVGに一つだけの割合を追加しました http://datahealthcheck.databarracks.com/2016/#backup-section-3

を応答（右側）を作るために探していSVGsの一つであります

<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>

私は薄いですkメディアクエリはdivを反応的にするための最良の方法です。

あなたは

Answer 2

私は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で行くと思いますあなたの位置固定のdivにwith:100%とmax-widthを使用することができない場合は、より深いが起こっていること