Question

我希望有一个width: 150px;的侧面导航，然后是旁边的内容。我希望内容为100％减去150px侧导航宽度。这可能吗？

我知道我可以在Javascript中完成它，但我更愿意知道一个简单的CSS解决方案，这将是：

width:100%-150px;

有这样的解决方案吗？

Answer 1

我希望内容宽度为100％，减去150px的侧面导航宽度。这可能吗？

是：

width: calc(100% - 150px);

N.B。请务必在减号的任一侧留出空格。 CSS解析器需要清楚它正在解析一个减号，然后是一个正整数。

Answer 2

有很多不同的方法可以实现这一目标，这里有一些。

1。使用`float` + `overflow`：

请注意，内容框不应设置任何浮动，overflow:auto可以阻止wrapped text进入侧边栏框。

＆＃13;

.container:after {
  content: "";
  display: table;
  clear: both;
}
.sidebar {
  background: pink;
  width: 150px;
  float: left;
}
.content {
  background: gold;
  overflow: auto;
}

＆＃13;

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

＆＃13;

2：使用`float` + `calc`：

基本上参见browser support tables - IE9 +。

＆＃13;

.container:after {
  content: "";
  display: table;
  clear: both;
}
.sidebar {
  background: pink;
  width: 150px;
  float: left;
}
.content {
  background: gold;
  width: calc(100% - 150px);
  float: left;
}

＆＃13;

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

＆＃13;

3。使用`display:inline-block` + `calc`：

＆＃13;

.container {
  font-size: 0; /*remove white space*/
}
.sidebar, .content {
  font-size: 16px; /*reset font size*/
  display: inline-block;
}
.sidebar {
  background: pink;
  width: 150px;
}
.content {
  background: gold;
  width: calc(100% - 150px);
}

＆＃13;

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

＆＃13;

4。使用CSS表：

＆＃13;

.container {
  display: table;
  width: 100%;
}
.sidebar, .content {
  display: table-cell;
}
.sidebar {
  background: pink;
  width: 150px;
}
.content {
  background: gold;
}

＆＃13;

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

＆＃13;

5。使用flexbox：

使用browser support tables查看prefixes - IE10 +。

＆＃13;

.container {
  display: flex;
}
.sidebar {
  background: pink;
  flex: 0 0 150px;
}
.content {
  background: gold;
  flex: 1;
}

＆＃13;

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

＆＃13;

Answer 3

另一种方法是使侧面导航浮动，然后使主要内容宽度为100％，并在导航的同一侧包含150px的填充

Answer 4

一个选项是指定

.content {
   left: 0;
   position: absolute;
   right: 150px;
}
.sidenav {
   float: right;
   margin-right: -150px;
}

对于内容，

而不是width: 100%。注意：我假设父元素的相对位置（包含内容和侧面导航）。

祝你好运！

将宽度设置为父元素

4 个答案:

1。使用`float` + `overflow`：

2：使用`float` + `calc`：

3。使用`display:inline-block` + `calc`：

4。使用CSS表：

5。使用flexbox：

将宽度设置为父元素

4 个答案:

1。使用float + overflow：

2：使用float + calc：

3。使用display:inline-block + calc：

4。使用CSS表：

5。使用flexbox：

1。使用`float` + `overflow`：

2：使用`float` + `calc`：

3。使用`display:inline-block` + `calc`：