Question

我想在页面左侧固定菜单占据宽度的20％，右侧的内容占据其余80％。就像这样：

目前，我的设置如下所示：

我尝试使用浮动来分隔两个容器，但它并没有真正起作用。

header#masthead {
    width: 100%;
    max-width: 20%;
    text-align: center;
    position: fixed;
    background-color: #232323;
    padding: 10px 20px;
    float: left;
}

如何将菜单放在侧栏（左侧）和网站其他部分的内容上？

这里是我的jsfiddle：https://jsfiddle.net/Wosley_Alarico/4bv9h7ed/1/

Answer 1

这就是你需要的。确保你使用bootstrap。

https://startbootstrap.com/template-overviews/simple-sidebar/

Answer 2

首先，我建议你创建一个以.container类为主要div的新div。然后，你必须把你的标题放在里面，并且一个全新的div将处理右侧的内容。您现在要做的就是通过设置主容器的display: flex和两个子div的宽度来准备css。

请仔细检查一下这段话，我相信您下次可以自行完成。

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.main-navigation ul {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.main-navigation li {
  border-top: 1px solid #eeb422;
  padding: 7px;
}
.main-navigation li:last-child {
  border-bottom: 1px solid #eeb422;
}
.main-navigation a {} #home {
  width: 80%;
  height: 100%;
  background-color: black;
}
header {
  width: 30vw;
}
.mainContent {
  width: 70vw;
  background-color: lightblue;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
}

＆＃13;

<div class='container'>



  <header id="masthead" class="site-header" role="banner">
    <div class="site-branding">
      <figure>
        <a href="http://localhost/cigarros/" class="custom-logo-link" rel="home" itemprop="url">
          <img width="261" height="150" src="http://pets.petsmart.com/services/_images/grooming/dog/m_t/dog-aromatherapy.jpg" class="custom-logo" alt="cropped-cigarros.jpg" itemprop="logo" />
        </a>
      </figure>
    </div>
    <!-- .site-branding -->

    <nav id="site-navigation" class="main-navigation" role="navigation">
      <!--                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>-->
      <div class="menu-menu-1-container">
        <ul id="primary-menu" class="menu">
          <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
            <a href="http://localhost/cigarros/about-us/">About Us</a>
          </li>
          <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
            <a href="http://localhost/cigarros/products/">Products</a>
          </li>
          <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
            <a href="http://localhost/cigarros/contact/">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- #site-navigation -->
  </header>
  <!-- #masthead -->

  <div id="content" class="site-content">


    <section id="home">


    </section>

  </div>


  <div class='mainContent'>

  </div>

</div>

＆＃13;

Answer 3

您可以为.site-header元素和.site-content元素使用包装器，并将display: flex添加到包装器CSS属性中。这样，.site-header元素将与.site-content位于同一行。

现在您只需将元素的宽度修改为所需的值即可。

Here是基于你的jsfiddle。

如何修复左侧的菜单和右侧的主要内容

3 个答案: