Question

我使用以下代码构建一个固定的侧边栏，它应始终为100％高度和20％宽度。主要部分应显示在它旁边。

＆＃13;

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 80%;
  background: blue;
  min-height: 1200px;
}

＆＃13;

<div id="sidebar">

  <nav>

    <ul>

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>

    </ul>

  </nav>

</div>


<main>

  <div id="content">

    Content

  </div>

</main>

＆＃13;

代码似乎不起作用。我做错了什么？

Answer 1

通过修复侧边栏，您可以将其从通常的CSS元素顺序中删除。因此，将main设置为80%并不能真正创建您希望实现的20% + 80%幻觉。相反，您的main会在侧边栏下，而且宽度也只有80%。

你想要的是一个100% main，左边是20%的填充，所以没有任何东西可以到达那里，因此你的所有内容都是可见的。

＆＃13;

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 100%;
  box-sizing: border-box;
  padding-left: 20%;
  background: blue;
  min-height: 1200px;
}

＆＃13;

<div id="sidebar">

  <nav>

    <ul>

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>

    </ul>

  </nav>

</div>


<main>

  <div id="content">

    Content

  </div>

</main>

＆＃13;

Answer 2

body{
  position: relative;
  margin: 0px;
}

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 80%;
  box-sizing: border-box;
  background: #00F none repeat scroll 0% 0%;
  min-height: 1200px;
  margin-left: 20%;
  position: absolute;
}

<body>
  <div id="sidebar">
    <nav>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </nav>
  </div>
  <main>
   <div id="content">
    Content
   </div>
  </main>
</body>

Answer 3

将margin-left: 20%添加到main以抵消#sidebar所涵盖的空间。

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}
#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  margin-left: 20%;
  width: 80%;
  background: blue;
  min-height: 1200px;
}

＆＃13;

<div id="sidebar">
  <nav>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
  </nav>
</div>

<main>
  <div id="content">
    Content
  </div>
</main>

＆＃13;

Answer 4

在主div上添加左边距和侧边栏一样宽。

if(!isset($_POST['session_ID']))
{

    $json[] = array(
        'return' => $errors_authentification,
        'error_msg' => "User not authenticated"
    );

    echo json_encode($json);
    return;
}

session_id($_POST['session_ID']);
session_start();

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 80%;
  background: blue;
  min-height: 1200px;
  margin-left: 20%;
}

Answer 5

您的代码很好但是侧边栏与主要内容重叠。您可以做的是将position属性添加到主要内容并调整其左侧属性。

使用position属性和left属性尝试此代码。：）

＆＃13;

#sidebar {
  width: 20%;
  position: fixed;
  background: red;
  height: 100%;
}
main {
  width: 80%;
  background: blue;
  min-height: 1200px;
  position:absolute;
  left:100px;
}

＆＃13;

<div id="sidebar">

  <nav>

    <ul>

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>

    </ul>

  </nav>

</div>


<main>

  <div id="content">

    Content

  </div>

</main>

＆＃13;

我怎样才能获得固定的侧边栏？

5 个答案: