集装箱全宽答案

【问题标题】：Container full width集装箱全宽
【发布时间】：2018-01-23 08:21:39
【问题描述】：

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

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

.container {
  width: 100%;

  .sidebar {
    width: 280px;
  }

  .home {
    width: 100%;
  }
}

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

【问题讨论】：

您的意思是让home div 占据其余空间吗？不清楚你在问什么。
可能重复 - stackoverflow.com/questions/1260122/…
你能提供一个工作的sn-p吗？
学习 Flexbox 或 CSS 网格对制作这些类型的模板有很大帮助

标签： html css sass less

【解决方案1】：

如果你想让 home 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);
}

【讨论】：

【解决方案2】：

以下将创建一个固定宽度为 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>

【讨论】：

【解决方案3】：

您似乎需要了解 CSS display 属性。这可能是处理 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>

【讨论】：

是的，我会的。大多数时候我只使用inline，inline-block 属性display 这就是为什么我不知道谢谢你的知识！ :)

【解决方案4】：

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

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

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

  .home {
    width:auto;
  }
}

【讨论】：

【解决方案5】：

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

#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>

【讨论】：

欢迎@MavrickRMX' :-)