左边定宽，右边自适应布局方法

方法一：弹性伸缩盒（flex）

...
    
       
        
        .content{  
            display: flex;
            height:830px;
            width: 100%;
        }
        .nav{ 
            width: 360px;
            height:100%;
            background-color: #263238;
        }
        .right_content{  
            width: 100%;
            height: 100%;
            background-color: #ecf0f5;
        }
    
...



    

        nav
    
    

        right
    

基础知识：使用弹性伸缩盒布局（flex布局）将块级元素显示在一行中.

效果如下：

代码：

...
    
		.d_flex{
			width: 500px;
			border: 2px solid black;
			display: flex;

		}
		.flex{
			width: 50px;
			height: 50px;
			border: 1px solid red;
		}
	

...


	

		
box
		
box
		
box
		
box
		
box
	

方法二：设置浮动 + 在 css 中使用 calc() 函数

    *{
        margin: 0;
        padding: 0;
    }
    .content{
        clear: both;
       
    }
    .left{
        width: 100px;
        height: 700px;
        float:left;
        background: #ddddff;
    }
    .right{
        width: calc(100% - 120px);
        height: 700px;
        float:left;
        background:#ffdddd ;
       
    }




    

        

            left
        
        

            right