Question

我正在尝试为响应式网页创建固定的侧边菜单。

出于某种原因，我菜单下面的其他内容层。这是为什么？我可以将哪个属性添加到菜单中以确保将来所有内容都会堆叠在菜单旁边，因此菜单下方不会有任何内容滑动。

＆＃13;

body {
  color: #666666;
}

.menu {
  position: fixed;
}

＆＃13;

<script src="js/bootstrap.min.js"></script>

<div class="menu">

  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>

</div>

<div class="content">
  <p>
    contentcontentcontent
  </p>
</div>

＆＃13;

Answer 1

向菜单添加宽度，然后将margin-left应用于内容。

左边距值应与菜单宽度相同

您也可以应用填充而不是边距。

＆＃13;

body {
  color: #666666;
}

.menu {
  position: fixed;
  width: 100px;
}

.content {
  margin-left: 100px;
}

＆＃13;

<!DOCTYPE html>

<title>Bootstrap test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="menu">

  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>
  <a href="">menu</a><br>

</div>

<div class="content">
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
  <p>
    contentcontentcontent
  </p>
</div>

＆＃13;

Answer 2

.menu{
    position: fixed;
    height:600px;
    width:160px;
    background:#222527;
}

Answer 3

您可以为菜单设置固定宽度e计算内容宽度并添加像这样的浮动位置

<div class="menu">

         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>
         <a href="">menu</a><br>

         </div>

         <div class="content">
                  <p>
               contentcontentcontent
                  </p> 
         </div>

CSS：

.menu {
  position: fixed;
  width: 50px;
  float: left;
}

.content {
  width: calc(100% - 50px);
  float: right;
}

CSS侧面菜单内容分层如下

3 个答案: