できるだけ幅を動的に埋めてください

Question

私は固定されたメニューバーを左側に持っています。その右側に私はセクションを持っています。このセクションは、ビューポートの幅から固定されたメニューバーの幅を差し引いて、セクション自体のマージンとパディングを引いた値の100％を補うようにします。 私はこのセクションの中に画像を集中させようとしています - それは、あなたがフィドルで見ることができる黒い線です。青い領域（セクション）に中心を置くことが推奨されます。

問題

セクションでは、画像を中心としたが、右へ少し移動していないかによって、あなたが見ることができる広すぎます。

注： - あなたがのためにposition: fixedを使用しているので>https://jsfiddle.net/n9yyrxfm/

html, 
 
body { 
 
    border-sizing: border-box; 
 
    font-family: "Dosis", "Arial", "Serif"; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    margin-left: 10px; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.navbar-menu { 
 
    z-index: 100; 
 
    position: fixed; 
 
    width: 15vw; 
 
    height: 100%; 
 
    color: #000; 
 
    margin-top: 4vh; 
 
} 
 

 
.navbar-menu ul { 
 
    padding-left: 0; 
 
} 
 

 
.navbar-menu ul li { 
 
    display: block; 
 
    width: 140px; 
 
    font-size: 22px; 
 
    padding: 4px 0 4px 10px; 
 
    margin-top: 20px; 
 
} 
 

 
p { 
 
    width: 250px; 
 
} 
 

 
div#content { 
 
    /*margin-left: -140px*/ 
 
    margin-left: 160px; 
 
    margin-right: 160px; 
 
    height: 200px; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    color: #000; 
 
    display: block; 
 
    position: absolute; 
 
    top: 35px; 
 
    background: lightblue; 
 
    transition: opacity 0.9s linear; 
 
    -webkit-transition: opacity 0.9s ease-in-out; 
 
    -moz-transition: opacity 0.9s ease-in-out; 
 
} 
 

 
section#sec-home img { 
 
    width: 250px; 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
    border-radius: 76px 171px 87px 171px; 
 
    -moz-border-radius: 76px 171px 87px 171px; 
 
    -webkit-border-radius: 76px 171px 87px 171px; 
 
    border: 5px solid #000000; 
 
    -webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49); 
 
    -moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49); 
 
    box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49); 
 
}

<nav class="navbar-menu"> 
 
    <ul id="list" class="test"> 
 
    <li id="emph nav-home">Home</li> 
 
    <li id="nav-portfolio">Portfolie</li> 
 
    <li id="nav-skills">Færdigheder</li> 
 
    <li id="nav-erfaring">Erfaring</li> 
 
    <li id="nav-kontakt">Kontakt mig</li> 
 
    </ul> 
 
</nav> 
 
<div id="content"> 
 
    <section class="animatedFade" id="sec-home"> 
 
    <img src="images/portrait1.png" alt=""> 
 
    <p>asdfr <span class="navn">asdfian</span></p> 
 
    </section> 
 
</div>

Answer 1

x軸

コードをスクロールすることはできないはず左側のサイドバーにpadding親のための同じの。したがって、margin-leftとmargin-rightの両方を持つコンテンツの代わりに、marginを付けずに、コンテンツの全幅をそのままにしてください。

html, 
 
body { 
 
    border-sizing: border-box; 
 
    font-family: "Dosis", "Arial", "Serif"; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    margin-left: 10px; 
 
    padding: 0 0 0 15vw; /* Change this to navbar width. */ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; /* Add this. */ 
 
    box-sizing: border-box; /* Add this. */ 
 
} 
 

 
.navbar-menu { 
 
    z-index: 100; 
 
    position: fixed; 
 
    width: 15vw; 
 
    height: 100%; 
 
    color: #000; 
 
    left: 0; /* Add this. */ 
 
    margin-top: 4vh; 
 
} 
 

 
.navbar-menu ul { 
 
    padding-left: 0; 
 
} 
 

 
.navbar-menu ul li { 
 
    display: block; 
 
    width: 100%; 
 
    font-size: 22px; 
 
    padding: 4px 0 4px 10px; 
 
    margin-top: 20px; 
 
} 
 

 
p { 
 
    width: 250px; 
 
} 
 

 
div#content { 
 
/* Remove these. 
 
    margin-left: 160px; 
 
    margin-right: 160px; 
 
*/ 
 
    height: 200px; 
 
} 
 

 
section { 
 
/* width: 100%; remove */ 
 
    color: #000; 
 
    display: block; 
 
/* position: absolute; remove */ 
 
    margin-top: 35px; /* replace */ 
 
    background: lightblue; 
 
    transition: opacity 0.9s linear; 
 
    -webkit-transition: opacity 0.9s ease-in-out; 
 
    -moz-transition: opacity 0.9s ease-in-out; 
 
} 
 

 
section#sec-home img { 
 
    width: 250px; 
 
    display: block; 
 
    margin: 0 auto 0 auto; 
 
    border-radius: 76px 171px 87px 171px; 
 
    -moz-border-radius: 76px 171px 87px 171px; 
 
    -webkit-border-radius: 76px 171px 87px 171px; 
 
    border: 5px solid #000000; 
 
    -webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49); 
 
    -moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49); 
 
    box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49); 
 
}

<nav class="navbar-menu"> 
 
    <ul id="list" class="test"> 
 
    <li id="emph nav-home">Home</li> 
 
    <li id="nav-portfolio">Portfolie</li> 
 
    <li id="nav-skills">Færdigheder</li> 
 
    <li id="nav-erfaring">Erfaring</li> 
 
    <li id="nav-kontakt">Kontakt mig</li> 
 
    </ul> 
 
</nav> 
 
<div id="content"> 
 
    <section class="animatedFade" id="sec-home"> 
 
    <img src="images/portrait1.png" alt=""> 
 
    <p>asdfr <span class="navn">asdfian</span></p> 
 
    </section> 
 
</div>

これは修正された流体レイアウトの問題です。私のガイドScience behind Fixed-Fluid Layoutsを参照してください。

Answer 2

.navbar-menuにはposition: fixedがあるので、他のすべての要素で無視されます。それは一定の幅を持っているので

しかし、あなたは簡単にこのようなcalcを使用して、あなたの問題を解決することができます：あなたは、その後もそれを大きくしないためにとあなたのセクションからの余白を削除する必要があります

section { 
    width: calc(100% - 15vw); 
} 

注意それよりも。