html - 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>

而主要内容是(里面有一个表格组件):

<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

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

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

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

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

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

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