容器全宽

Question

首先，很抱歉标题不是很明确

这是我的问题：我有一个容器，里面有一个 280px 的侧边栏，我想让主页全宽。但是如果我这样写

.container {
  width: 100%;

  .sidebar {
    width: 280px;
  }

  .home {
    width: 100%;
  }
}

主页在下面，我想把侧边栏放在一边。但是我不知道该怎么做

Answer 1

以下将创建一个固定宽度为 280px 的侧边栏和一个具有可变宽度的 div (.home)：

SCSS

.container {
  width: 100%;
  overflow:hidden;

  .sidebar {
    float:right; /* or float:left for left sidebar */
    width:280px;
  }

  .home {
    margin-right:280px; /* or margin-left for left sidebar */
  }
}

HTML

<div class="container">
  <div class="sidebar">

  </div>
  <div class="home">

  </div>
</div>

Answer 2

这是一个 CSS 解决方案，使用 calc() function 到 minus 来自 .home

的 .sidebar width

#container {
  width: 100%;
  height: 300px;
}

#container .sidebar {
  width: 280px;
  height: 100%;
  background: blue;
  display: inline-block;
  color:#fff;
}

#container .home {
  width: calc(100% - 285px);
  height: 100%;
  background: yellow;
  display: inline-block;
}

<div id="container">
  <div class="sidebar">SideBar</div>
  <div class="home">Home</div>
</div>

Answer 3

这应该有效： https://jsfiddle.net/0bsygLsh/

.container {
  width: 100%;
  overflow:hidden;

  .sidebar {
    width:280px;
    display:inline-block;
    float:left;
  }

  .home {
    width:auto;
  }
}

Answer 4

您似乎需要了解 CSS 显示属性。这可能是处理 CSS 时最重要的事情。看这里https://www.w3schools.com/cssref/pr_class_display.asp

这是使用 display: flex 解决您的问题的示例。不过，您的问题可以通过多种方式解决。考虑使用 display: inline.

自己尝试

.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex-basis: 100px;
  background-color: red;
}

.home {
  flex: 1;
  background-color: blue;
}

<div class="container">
  <div class="sidebar">
    I'm the sidebar
  </div>
  <div class="home">
    I'm the home page
  </div>
</div>

Answer 5

如果你想让主页 div 全宽并且侧边栏 div 应该在它上面，那么 css 将在下面：

    .container {
      width: 100%;
      position: relative;
    }
   .sidebar {
      width: 280px;
      position: absolute;
      top: 0;
      left: 0;
   }

   .home {
      width: 100%;
      padding-left: 280px;
   }

或者如果你想让它们并排放置，那么 css 应该如下：

.container {
      width: 100%;
}
.container:after {
    display: table;
    content: "";
    clear: both;
}
.sidebar {
   float: left;
   width: 280px;
}

.home {
   float: left;
   width: calc(100% - 280px);
}

容器全宽

Container full width

html

css

sass

less