CSS：Vue.js 中的固定边栏

Question

我正在创建一个布局，其中侧边栏将固定在左侧并放置在具有自己的网格的容器旁边。我使用 Vue.js，因此每个模板都有其 <div>，我需要将其他 <div> 与侧边栏或主要内容放在一起。当我尝试放置侧边栏或给它颜色等时，我的布局似乎不想接受我的 CSS 规则。请帮忙！

这是我的布局：

<template>
 <div>
  <sidebar />
  <main-content />
 </div>
</template>

边栏在哪里：

<template>
<div>
<div class="sidebar">
  <div id="logo">
    <img src="" />
  </div>
  <h1><a href="#">Company</a></h1>
  <ul>
    <!--<li><a href="#">About</a></li>-->
    <!--<li><a href="#">Popular</a></li>-->
    <!--<li><a href="#">News</a></li>-->
    <!--<li><a href="#">Pages</a></li>-->
    <li><a href="#">Users</a>
      <ul id="sublist">
        <li><a href="#">Import</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </li>
    <!--<li><a href="#">Organisations</a></li>-->
    <li><a href="#">Polls</a></li>
  </ul>
 </div>
</div>
</template>

而主要内容是（里面有一个table组件）：

<template>
<div>
<div class="container-grid">
  <div class="header">
    <h2>Users</h2>
    <button>Add</button>
    <h3>Import users</h3>
  </div>
  <main-table />
 </div>
</div>
</template>

这是我的 CSS:

.sidebar {
height: 100%;
width: 300px;
max-width: 1024px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
h1 {
display: inline;
height: 29px;
width: 156px;
}
ul,
#sublist {
list-style: none;
margin: 0;
padding: 0;
}
a {
height: 20px;
width: 200px;
text-decoration: none;
display: block;
}

// Main Content Style

.container-grid {
margin-left: 336px;
}

Answer 1

它在代码片段中按预期工作，除了我有一件令人费解的事情：它不会为我设计 .container-grid 样式。我终于弄清楚原因是嵌入的注释（// Main content style）无效css。我不知道这是否可能是您的开发环境中的问题。

new Vue({
  el: "#app",
  components: {
    sidebar: {
      template: '#sidebar-template'
    },
    mainContent: {
      template: '#main-template'
    }
  }
});

.sidebar {
  background-color: #fee;
  height: 100%;
  width: 150px;
  max-width: 1024px;
  opacity: 0.5;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

h1 {
  display: inline;
  height: 29px;
  width: 156px;
}

ul,
#sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  height: 20px;
  width: 200px;
  text-decoration: none;
  display: block;
}

.container-grid {
  background-color: #eef;
  margin-left: 180px;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <sidebar></sidebar>
  <main-content></main-content>
</div>

<template id="sidebar-template">
<div>
<div class="sidebar">
  <div id="logo">
    <img src="" />
  </div>
  <h1><a href="#">Company</a></h1>
  <ul>
    <!--<li><a href="#">About</a></li>-->
    <!--<li><a href="#">Popular</a></li>-->
    <!--<li><a href="#">News</a></li>-->
    <!--<li><a href="#">Pages</a></li>-->
    <li><a href="#">Users</a>
      <ul id="sublist">
        <li><a href="#">Import</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </li>
    <!--<li><a href="#">Organisations</a></li>-->
    <li><a href="#">Polls</a></li>
  </ul>
 </div>
</div>
</template>

<template id="main-template">
<div class="container-grid">
  <div class="header">
    <h2>Users</h2>
    <button>Add</button>
    <h3>Import users</h3>
  </div>
 </div>
</template>

Answer 2

这不是您问题的答案，只是提醒一下。

您不需要每次都用 div 包裹您的组件。您只需要确保您只有 1 个根元素。

这意味着如果您有 2 个这样的元素，则需要将它们包装起来：

<template>
    <div>
        <span></span>
        <span></span>
    </div>
</template>

但是您可以像这样简单地将单个 span 元素留在模板中：

<template>
    <span></span>
</template>

Answer 3

像这样：
HTML:

    <section>
        <p>sidebar</p>
    </section>
    <section>
        <h2>Section1</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>
    <section>
        <h2>Section2</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>
    <section>
        <h2>Section3</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>
    <section>
        <h2>Section4</h2>
        <p>section1 whatever data you want to put in this section</p>
    </section>

CSS:

    section:first-child { 
        width: 20%;
        height: 100vh;
    }
    section {
        width: 80%;
        float: left;
    }

但您需要更改高度：100vh；覆盖整个页面高度而不仅仅是 veiwport 高度的内容。

这样做意味着所有其他部分都将位于第一个部分的右侧（您放置边栏的位置）

CSS：Vue.js 中的固定边栏

CSS: Fixed-sidebar in Vue.js

html

css

grid

sidebar

vue.js