固定弹性导航栏后面的内容而不是下面

时间：2017-08-03 03:55:54

标签： html css css3 flexbox css-position

我创建了一个简单的导航栏，并为其子项安排了弹性框。导航栏的位置是固定的。但是导航栏从页面开始而不是导航栏之后的容器（div），我相信它被忽略导致它的位置属性是固定的。

/home/yalishanda/torch/install/bin/lua: /home/yalishanda/openface/batch-represent/dataset.lua:130: attempt to index global 'jit' (a nil value)
stack traceback:
    /home/yalishanda/openface/batch-represent/dataset.lua:130: in function '__init'
    /home/yalishanda/torch/install/share/lua/5.2/torch/init.lua:91: in function </home/yalishanda/torch/install/share/lua/5.2/torch/init.lua:87>
    [C]: in function 'dataLoader'
    .../yalishanda/openface/batch-represent/batch-represent.lua:19: in function 'batchRepresent'
    ../batch-represent/main.lua:42: in main chunk
    [C]: in function 'dofile'
    ...anda/torch/install/lib/luarocks/rocks/trepl/scm-1/bin/th:150: in main chunk
    [C]: in ?
^CTraceback (most recent call last):
  File "./myScript.py", line 47, in <module>
    ret, frameRGB = video_capture.read()

* {
  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;
}

我尝试添加padding-top：40px;到身体，但这显示为导航栏上方的空间

<!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>
* {
  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;
}

1 个答案:

答案 0 :(得分：1)

将padding-top: 40px添加到.blocks课程。这将使导航栏固定在顶部并将块移动。

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题