logo标签列表

将宽度设置为父元素剩余宽度

htmlcss
5
我希望有一个宽度为150px的侧边导航，其余内容则浮动在其旁边。我希望内容的宽度为100%减去150px的侧边导航宽度。这个可行吗？
我知道可以用Javascript实现，但我更想知道一个简单的CSS解决方案，类似于：
width:100%-150px;

有这样的解决方案吗？
4个回答
4
我希望内容可以100%宽度，减去150像素的侧边导航宽度。这是否可能？ 是的：
width: calc(100% - 150px);

注意：一定要在减号两侧留有空格。CSS解析器需要明确它正在解析一个减号，后面跟着一个正整数。

这是一项实验性技术。由于这项技术的规范尚未稳定，因此请在各种浏览器中使用前先检查兼容性表。请注意，实验性技术的语法和行为可能会随着规范的变化而在浏览器的未来版本中发生改变。https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility - Manatax
虽然，我更喜欢这个答案的简洁性。 - Manatax
2

有许多不同的方法可以实现这一点，以下是其中的几种。

1. 使用 float + overflow:

注意，内容框不应设置任何浮动，并且 overflow:auto 可以防止换行文本进入侧边栏框下面。

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

2: 使用 float + calc：

请查看浏览器支持表格 - 基本支持IE9+。

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

3. 使用 display:inline-block + calc:

.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);
}
<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

4. 使用CSS表格:

.container {
  display: table;
  width: 100%;
}
.sidebar, .content {
  display: table-cell;
}
.sidebar {
  background: pink;
  width: 150px;
}
.content {
  background: gold;
}
<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

5. 使用flexbox：

请参阅浏览器支持表格 - IE10+需要使用前缀。

.container {
  display: flex;
}
.sidebar {
  background: pink;
  flex: 0 0 150px;
}
.content {
  background: gold;
  flex: 1;
}
<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>

1
另一种方法是使侧边导航浮动，然后使主要内容宽度为100％，并在与导航相同的侧面包含150像素的填充。
0

一个选择是指定

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

针对内容，使用width: 100%代替。注意：我假设父元素采用相对定位（包含内容和侧边导航）。

祝你好运！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接