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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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 hight。

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

CSS：Vue.js中的固定侧边栏

3 个答案: