公共HTML代码部分
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
方法一:float来和BFC实现
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}
.left {
width: 200px;
height: 100%;
background: red;
float: left;
}
.right {
height: 100%;
background: pink;
overflow: hidden;
}
</style>
方法二:absolute定位和margin值实现
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}
.left {
width: 200px;
height: 100%;
background: red;
position: absolute;
}
.right {
height: 100%;
background: pink;
margin-left: 200px;
}
</style>
方法三:calc(100% - 固定内容的宽度) 用calc函数动态计算数值
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
}
.left {
width: 200px;
height: 100%;
background: red;
float: left;
}
.right {
height: 100%;
background: pink;
float: left;
width: calc(100% - 200px);
}
</style>
方法四:flex布局轻松搞定
<style>
.content {
border: 1px solid #000;
height: 800px;
padding: 20px;
display: flex;
}
.left {
width: 200px;
height: 100%;
background: red;
}
.right {
height: 100%;
background: pink;
flex: 1;
}
</style>
方法五:使用table和table-cell实现
<style>
.content {
border: 1px solid #000;
width: 100%;
height: 800px;
display: table;
}
.left {
width: 200px;
height: 100%;
background: red;
display: table-cell;
}
.right {
height: 100%;
background: pink;
display: table-cell;
}
</style>
方法六:使用inline-block携手calc函数设置宽度
<style>
.content {
border: 1px solid #000;
width: 100%;
height: 800px;
font-size: 0;
}
.left {
width: 200px;
height: 100%;
background: red;
display: inline-block;
vertical-align: top;
}
.right {
height: 100%;
background: pink;
display: inline-block;
vertical-align: top;
width: calc(100% - 200px);
font-size: 16px;
}
</style>
陆荣涛前端学习交流Q群858752519
加群备注:CSDN推荐