实现侧栏固定宽度，内容栏宽度自适应

最新推荐文章于 2023-07-11 15:21:26 发布

小太阳sunshine

最新推荐文章于 2023-07-11 15:21:26 发布

阅读量732

点赞数

分类专栏：前端技巧文章标签： css 宽度自适应

本文链接：https://blog.youkuaiyun.com/zfangls/article/details/53446120

版权

前端技巧专栏收录该内容

15 篇文章

订阅专栏

常用侧栏固定宽度，内容栏的宽度自适应，在不同的分辨率下实现宽度自适应。下面是我根据工作实践总结的一些实现方法的demo。

这里写图片描述

方法一：固定宽度区浮动 float，自适应区宽度自适应设置 margin

html结构：

<div class="content">
    <div class="slider">
      <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
        <li><a href="#">导航6</a></li>
      </ul>
    </div>
    <div class="main"></div>
  </div>

css部分：

*{
    padding:0;
    margin:0;
  }
  .content{
    overflow:hidden;
    _zoom:1;
  }
  .slider{
    float: left;
    width:90px;
    padding:0 0 500px 0;
    background-color: #f3f5f7;
  }
  .slider ul{
    list-style:none;
  }
  .slider ul li{
    line-height: 60px;
    text-align: center;
    border-bottom:1px solid #ccc;
  }
  .slider ul li a{
    text-decoration: none;
    color:#333;
    font-size:14px;
  }
  .main{
    background-color: #d6d6d6;
    margin-left:90px;
    padding:10px 0 300px 10px;
  }

方法二：固定宽度区使用绝对定位，自适应区仍然设置margin

html结构同上

css部分：

*{
    padding:0;
    margin:0;
  }
  .content{
    position: relative;
  }
  .slider{
    position: absolute;
    left:0;
    top:0;
    width:90px;
    padding:0 0 500px 0;
    background-color: #f3f5f7;
  }
  .slider ul{
    list-style:none;
  }
  .slider ul li{
    line-height: 60px;
    text-align: center;
    border-bottom:1px solid #ccc;
  }
  .slider ul li a{
    text-decoration: none;
    color:#333;
    font-size:14px;
  }
  .main{
    background-color: #d6d6d6;
    margin-left:90px;
    padding:10px 0 300px 10px;
  }

方法三：flex布局

html结构同上

css部分：

*{
    padding:0;
    margin:0;
  }
  .content{
    display:flex;
    -webkit-display:flex;
  }
  .slider{
    flex:0 0 90px;
    width:90px;
    padding:0 0 500px 0;
    background-color: #f3f5f7;
  }
  .slider ul{
    list-style:none;
  }
  .slider ul li{
    line-height: 60px;
    text-align: center;
    border-bottom:1px solid #ccc;
  }
  .slider ul li a{
    text-decoration: none;
    color:#333;
    font-size:14px;
  }
  .main{
    flex:1;
    background-color: #d6d6d6;
    padding:10px 0 300px 10px;
  }