デスクトップの画面に合わせてレイアウトを調整するにはどうすればいいですか？ウェブサイトのHTMLのCSS

これが私のデザインです：デスクトップの画面に合わせてレイアウトを調整するにはどうすればいいですか？ウェブサイトのHTMLのCSS

<style> 
body { 
    background: linear-gradient(rgba(0,0,0, .5), rgba(0,0,0,.5)), url('https://www.gamewallpapers.com/wallpapers_slechte_compressie/wallpaper_rune 
scape_02_1920x1080.jpg') no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover; 
    margin: 0; 
} 
/* IE 6 */ 
* html #footer { 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+ 
(document.documentElement.clientHeight ? document.documentElement.clientHeight : 
document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ?    
document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
} 

.nav { 
    background: rgba(0,0,0,0.6); 
    height: 10%; 
    width: 100%; 
    position: fixed; 
} 
.footer { 
    background: rgba(0,0,0,0.6); 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:5%; 
    width:100%; 
} 
.side-bar { 
    position: fixed; 
    width: 200px; 
    height: 85%; 
    background: #000; 
    margin-bottom: 2%; margin-top: 4.7%; 
} 
</style> 

<html> 
<head> 
<title>RuneStake</title> 
</head> 
<body> 
<div class="nav"> 
</div> 

<div class="side-bar"> 
</div> 



<div class="footer"> 
</div> 
</body> 
</html>

このデザインは私のブラウザ上で動作しますが、それは他のデスクトップ/ブラウザ上の割合の出入りを開始します。どのようにすべての長さがすべてのデスクトップ/ブラウザで機能するようにこれを修正するのですか？

これは、現在、このように表示されます：

おかげ

出典

2017-11-13 BrandonS

あなたはブートストラップのようなフレームワークを見て、あなたの人生を楽にします。 http://getbootstrap.com – claudio

余白をパーセント値にしないでください。幅と高さはパーセンテージとしては問題ありませんが、マージンはほとんどのサイトで同じままにする必要があります。あなたのナビの高さは10％で、サイドバーのマージントップは4.7％ですので、サイドバーはナビゲーションと重なります。 –

しかし、パーセンテージを使用しないと、大きなデスクトップ上の要素（iMacの外観は実際には小さくなります）。パーセンテージを使用することで、より均整の取れた要素が得られますが、スペースから外に出るようになります... – BrandonS

www.runestake.x10.bz/home.phpあなたはtop: 10%の代わりmargin-top: 4.7%を使用することができます。マージンをパーセンテージとして使用すると、親ではなくエレメント自体の高さから計算されます（margin-top: 4.7%は体高の85％の4.7％、top: 10%は身長の10％になります）。

.side-bar { 
    position: fixed; 
    top: 10%; 
    width: 200px; 
    height: 85%; 
    background: #000; 
}

出典

2017-11-13 19:53:38 Savado

非常によく説明されており、今私は理解しています:) – BrandonS

@BrandonS嬉しいです！私の答えを受け入れるようにマークしてください、ありがとうございます:) – Savado

デスクトップの画面に合わせてレイアウトを調整するにはどうすればいいですか？ウェブサイトのHTMLのCSS

答えて

関連する問題