DIV卡在頁面左側

Question

我在頁面的左側創建了一個固定菜單，現在我想通過設置左側和右側CSS值的值創建一個「內容」區域，但是，內容不會相應調整。

JSFiddle

body { 
 
    margin: 0px; 
 
    background-image: url(_assets/bg_2.png); 
 
    background-position: center; 
 
    background-repeat: repeat; 
 
    height: 300%; 
 
} 
 
@font-face { 
 
    src: url("_assets/Socialico.ttf"); 
 
    font-family: nav-social-1; 
 
} 
 
@font-face { 
 
    src: url("_assets/Socialico Plus.ttf"); 
 
    font-family: nav-social-2; 
 
} 
 
@font-face { 
 
    src: url("_assets/Century Gothic.ttf"); 
 
    font-family: nav-item; 
 
} 
 
/*-----------------MENU CLASSES-----------------*/ 
 
.menu-gap { 
 
    height: 25px; 
 
    width: 100%; 
 
} 
 
.sidebar-menu { 
 
    position: fixed; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 250px; 
 
    background-color: rgba(255, 255, 255, 0.75); 
 
} 
 
.logo { 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: transparent; 
 
} 
 
.logo-item { 
 
    width: 75%; 
 
    text-align: center; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    transition: background-image 0.25s; 
 
} 
 
.logo-item { 
 
    content: url(_assets/logo_up.png); 
 
} 
 
.logo-item:hover { 
 
    content: url(_assets/logo_over_2.png); 
 
} 
 
.nav-gap { 
 
    width: 22%; 
 
    height: 50px; 
 
    float: right; 
 
} 
 
.nav-menu { 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 375px; 
 
    background-color: transparent; 
 
} 
 
.nav-item { 
 
    margin: 0px; 
 
    width: 100%; 
 
    float: right; 
 
    text-align: right; 
 
    height: 75px; 
 
    line-height: 75px; 
 
    font-size: 14px; 
 
    text-shadow: 0.5px 0.5px 1px #c8c8c8; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    background-color: transparent; 
 
    -webkit-transition: color 0.35s; 
 
    -moz-transition: color 0.35s; 
 
    -o-transition: color 0.35s; 
 
    transition: color 0.35s; 
 
} 
 
.nav-item { 
 
    color: #555; 
 
} 
 
.nav-item:hover { 
 
    color: #b9a069; 
 
} 
 
.soc-menu { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
} 
 
.soc-item { 
 
    margin: 0px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    text-align: center; 
 
    -webkit-transition: opacity 0.25s ease; 
 
    -moz-transition: opacity 0.25s ease; 
 
    -o-transition: opacity 0.25s ease; 
 
    transition: opacity 0.25s ease; 
 
} 
 
.soc-item { 
 
    content: url(_assets/instagram_up.png); 
 
} 
 
.soc-item:hover { 
 
    content: url(_assets/instagram_over_2.png); 
 
} 
 
.copyright-menu { 
 
    height: auto; 
 
    margin: auto 0; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
} 
 
.copyright-item { 
 
    width: 100%; 
 
    height: 55px; 
 
    line-height: 10px; 
 
    font-size: 10px; 
 
    text-align: center; 
 
    color: #999; 
 
    font-family: nav-item; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
} 
 
a:active { 
 
    text-decoration: none; 
 
} 
 
/*-----------------MENU CLASSES-----------------*/ 
 

 
/*-----------------CONTENT CLASSES-----------------*/ 
 
.content-wrapper { 
 
    left: 350px; 
 
    right: 50px; 
 
    height: auto; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
} 
 
.header { 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 200px; 
 
    margin-bottom: 100px; 
 
} 
 
/*-----------------CONTENT CLASSES-----------------*/

<div class="sidebar-menu"> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    </div> 
 
    <div class="logo"> 
 
    <a href="http://www.stephanieengland.com/"> 
 
     <div class="logo-item"></div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    </div> 
 
    <div class="nav-menu"> 
 
    <a href="http://www.stephanieengland.com/about-me"> 
 
     <div class="nav-item">About Me 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/costumes"> 
 
     <div class="nav-item">Costumes 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/personal-works"> 
 
     <div class="nav-item">Personal Works 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/professional-credits"> 
 
     <div class="nav-item">Professional Credits 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    <a href="http://www.stephanieengland.com/contact"> 
 
     <div class="nav-item">Contact 
 
     <div class="nav-gap"></div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    <br /> 
 
    </div> 
 
    <div class="soc-menu"> 
 
    <a href="instagram"> 
 
     <div class="soc-item"></div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    </div> 
 
    <div class="copyright-menu"> 
 
    <a href="#"> 
 
     <div class="copyright-item"> 
 
     <br /> 
 
     <br />Stephanie England 
 
     <br />© Copyright 2016</div> 
 
    </a> 
 
    </div> 
 
    <div class="menu-gap"> 
 
    <br /> 
 
    </div> 
 
</div> 
 
<!-----------------MENU END-----------------> 
 

 
<!-----------------CONTENT START-----------------> 
 
<div class="content-wrapper"> 
 
    <div class="header"> 
 
    <div class="header-text">Contact Header Here Not Yet Set</div> 
 
    </div> 
 
</div> 
 
<!-----------------CONTENT END-----------------> 
 

 
<!-----------------FOOTER START-----------------> 
 
<div class="footer"> 
 
    <div class="soc-footer"> 
 
    <div class="soc-footer-item"></div> 
 
    </div> 
 
</div> 
 
<!-----------------FOOTER END----------------->

Answer 1

給予.sidebar-menu股利固定位置取出來的文件的流程。所以你的.content=wrapper div忽略它，並將自己定位到視口左側。你可以給它的250像素保證金左：

.content-wrapper{ 
    margin-left:250px; 
} 

爲了彌補這一點，但如果你只是想你的菜單堅持視口的左邊，我建議浮它（和內容包裝）代替。

https://jsfiddle.net/8rcws951/