两栏布局

[AILINGANGEL]

<div class="div1"></div>
<div class="div2"></div>l

方法一: 利用BFC

• float: left
• overflow: hidden

.div1 {
  float: left; // 这里
  width: 300px;
  background-color: pink;
  height: calc(100vh - 100px);
}

.div2 {
  background-color: black;
  height: 100vh;
  overflow: hidden; // 这里
}

方法二: 利用float和margin

• float: left
• margin-left: float元素的宽度

.div1 {
  float: left; // 这里
  width: 300px;
  background-color: pink;
  height: calc(100vh - 100px);
}

.div2 {
  background-color: black;
  height: 100vh;
  margin-left: 300px; // 这里
}

方法三: 两个float + calc

• float: left
• float: left + width: calc(100% - 左侧float元素的宽度)

.div1 {
  float: left; //这里
  width: 300px;
  background-color: pink;
  height: calc(100vh - 100px);
}

.div2 {
  float: left; //这里
  background-color: black;
  height: 100vh;
  width: calc(100% - 300px); // 这里
}

方法四: 经典的flex

• 父元素设置display:flex
• 第一个子元素固定宽度width
• 第二个子元素 flex-grow: 1 表示充满剩余的空间

// 这父元素
body {
  display: flex;
}
.div1 {
  width: 300px; // 
  background-color: pink;
  height: calc(100vh - 100px);
}

.div2 {
  flex-grow: 1; //这里
  background-color: black;
  height: 100vh;
}