1. 首頁
  2. 問答
  3. 固定柔性導航欄後面的內容而不是以下

固定柔性導航欄後面的內容而不是以下

2017-08-03 53 views
1

我創建了一個簡單的導航欄，並用柔性盒子排列了它的子節點。導航欄的位置是固定的。但是導航欄後面的容器（div）從頁面開始而不是導航欄開始後，我認爲它被忽略，導致其位置屬性被固定。固定柔性導航欄後面的內容而不是以下

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.navbar { 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 40px; 
 
} 
 

 
.social-icons { 
 
    display: flex; 
 
} 
 

 
.navbar>.social-icons {} 
 

 
.logo { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    margin-left: 10px; 
 
} 
 

 
.icon:last-of-type { 
 
    margin-right: 20px; 
 
} 
 

 
.blocks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.block:nth-child(even) { 
 
    background-color: purple; 
 
} 
 

 
.block:nth-child(odd) { 
 
    background-color: cornflowerblue; 
 
} 
 

 
.email-signup { 
 
    width: 100%; 
 
    padding: 10px; 
 
    height: 300px; 
 
    background-color: darkblue 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <div class="logo"> 
 
     <img src="images/iconmonstr-paper-plane-1.svg" alt=""> 
 
    </div> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="blocks"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="email-signup"></div> 
 
    <div class="footer"> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

我嘗試添加填充頂：40像素;身體但這顯示爲導航欄上方的空間

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding-top: 40px; 
 
} 
 

 
.navbar { 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 40px; 
 
} 
 

 
.social-icons { 
 
    display: flex; 
 
} 
 

 
.navbar>.social-icons {} 
 

 
.logo { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    margin-left: 10px; 
 
} 
 

 
.icon:last-of-type { 
 
    margin-right: 20px; 
 
} 
 

 
.blocks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.block:nth-child(even) { 
 
    background-color: purple; 
 
} 
 

 
.block:nth-child(odd) { 
 
    background-color: cornflowerblue; 
 
} 
 

 
.email-signup { 
 
    width: 100%; 
 
    padding: 10px; 
 
    height: 300px; 
 
    background-color: darkblue 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <div class="logo"> 
 
     <img src="images/iconmonstr-paper-plane-1.svg" alt=""> 
 
    </div> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="blocks"> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="email-signup"></div> 
 
    <div class="footer"> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

來源

2017-08-03 scroobius

+0

假設我讀這個權利，你可以嘗試添加'填充頂：40px'到'.blocks'類 –

回答

1

添加padding-top: 40px您.blocks類。這將使導航欄固定在頂部，並將您的區塊向下移動。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 

 
.navbar { 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    height: 40px; 
 
} 
 

 
.social-icons { 
 
    display: flex; 
 
} 
 

 
.navbar>.social-icons {} 
 

 
.logo { 
 
    display: flex; 
 
} 
 

 
.icon { 
 
    margin-left: 10px; 
 
} 
 

 
.icon:last-of-type { 
 
    margin-right: 20px; 
 
} 
 

 
.blocks { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    padding-top: 40px; 
 
} 
 

 
.block { 
 
    display: flex; 
 
    height: 500px; 
 
    width: 100%; 
 
    flex-direction: row; 
 
} 
 

 
.block:nth-child(even) { 
 
    background-color: purple; 
 
} 
 

 
.block:nth-child(odd) { 
 
    background-color: cornflowerblue; 
 
} 
 

 
.email-signup { 
 
    width: 100%; 
 
    padding: 10px; 
 
    height: 300px; 
 
    background-color: darkblue 
 
} 
 

 
.footer { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: whitesmoke; 
 
    padding: 10px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar"> 
 
    <div class="logo"> 
 
     <img src="images/iconmonstr-paper-plane-1.svg" alt=""> 
 
    </div> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 

 
    </div> 
 
    <div class="blocks"> 
 
    <div class="block">Test Content</div> 
 
    <div class="block"></div> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="email-signup"></div> 
 
    <div class="footer"> 
 
    <div class="social-icons"> 
 
     <div class="icon"><img src="images/iconmonstr-facebook-4.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-instagram-1.svg" alt=""></div> 
 
     <div class="icon"><img src="images/iconmonstr-twitter-4.svg" alt=""></div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

來源

2017-08-03 04:06:27

相關問題

 相關問題