Question

我想要一个包含页面剩余宽度内容的侧边菜单。

我的问题是，主要内容似乎没有看到导航菜单，而是出现在菜单下方。

我期待发生什么

| MAIN CONTENT & NAV  | MAIN CONTENT |

发生了什么

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 13%;
  height: 100%;
  background-image: url("/imgs/header-home-bg.jpg");
}

代码

<div class="wrapper">
  <nav>
    <ul>
      <p>Analytix</p>
      <div class="seperator"></div>
      <li class="dashboard"><a href=""><span class="entypo-chart-pie"></span>Dashboard</a>
      </li>
      <li class="myreports"><a href=""><span class="entypo-doc-text"></span>Tab 2</a>
      </li>
      <li class="datapub"><a href=""><span class="entypo-print"></span>Tab 3</a>
      </li>
      <li class="admin"><a href=""><span class="entypo-user"></span>Administration</a>
      </li>
      <li class="settings"><a href=""><span class="entypo-cog"></span>Settings</a>
      </li>
      <li class="logout-submit"><a href=""><span class="entypo-logout"></span>Log out</a>
      </li>
    </ul>
  </nav>
</div>
<section>
  <h3>MAIN CONTENT</h3>
</section>

join

Answer 1

在这种情况下，您不需要float或flex。

只需为主要内容指定左边距与position:fixed nav的宽度一样宽（或稍宽）。

因此，如果nav的宽度声明为width: 13%;

您可以声明：

section {
margin-left: 13.5%;
}

Answer 2

在这种情况下，您需要float

float CSS属性指定应该从中获取元素正常流动并沿其左侧或右侧放置容器，其中文本和内联元素将环绕它。

<强> SyntaxEDIT

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

https://developer.mozilla.org/en/docs/Web/CSS/float

nav {
    top:0;
    left:0;
    width:13%;
    height:100%;
    background-image: url("/imgs/header-home-bg.jpg");
    float:left;
    margin-right:40px;
    
}

  <div class="wrapper">

    <nav>
        <ul>
            <p>Analytix</p>
            <div class="seperator"></div>
            <li class="dashboard"><a href=""><span class="entypo-chart-pie"></span>Dashboard</a></li>
            <li class="myreports"><a href=""><span class="entypo-doc-text"></span>Tab 2</a></li>
            <li class="datapub"><a href=""><span class="entypo-print"></span>Tab 3</a></li>
            <li class="admin"><a href=""><span class="entypo-user"></span>Administration</a></li>
            <li class="settings"><a href=""><span class="entypo-cog"></span>Settings</a></li>
            <li class="logout-submit"><a href=""><span class="entypo-logout"></span>Log out</a></li>
        </ul>
    </nav>
</div>
<section>
    <h3>MAIN CONTENT</h3>
</section>

Answer 3

在这种情况下，请为<section>留出剩余的宽度（ 100％ - 侧边栏的宽度）＆amp;将它漂浮到右边。简单

section {
  width: 87%;
  float: right;
}

Answer 4

在身体margin-left <{1}}上使用<nav>，margin-left: calc(35% + 20px);

请看下面的代码段：

＆＃13;

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background-image: url("http://placehold.it/200x200");
  word-break: break-all;
}

body {
  margin-left: calc(35% + 20px);
}

＆＃13;

<div class="wrapper">
  <nav>
    <ul>
      <p>Analytix</p>
      <div class="seperator"></div>
      <li class="dashboard"><a href=""><span class="entypo-chart-pie"></span>Dashboard</a>
      </li>
      <li class="myreports"><a href=""><span class="entypo-doc-text"></span>Tab 2</a>
      </li>
      <li class="datapub"><a href=""><span class="entypo-print"></span>Tab 3</a>
      </li>
      <li class="admin"><a href=""><span class="entypo-user"></span>Administration</a>
      </li>
      <li class="settings"><a href=""><span class="entypo-cog"></span>Settings</a>
      </li>
      <li class="logout-submit"><a href=""><span class="entypo-logout"></span>Log out</a>
      </li>
    </ul>
  </nav>
</div>
<section>
  <h3>MAIN CONTENT</h3>
</section>

＆＃13;

希望这有帮助！

显示侧边菜单旁边的主要内容

4 个答案: