上下固定，左边固定，右边可以上下滑动，右侧有滑动条。
为保证原创性，css部分不出。

运行结果如下图：

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人主页模板</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="#" />
</head>

    
<body>
    <div class="nva">
    	<img src="#" alt="">
    </div>
    <div class="header">
        <div class="left">
            <div class="card">
                <div class="photo"><img src="#" alt=" "></div>
                <h1>标题一</h1>
                <h2>标题二</h2>
            </div>
		</div>
       	<div class="right">
            <div class="rig_upper">header</div>
            <div class="rig_under">footer</div>
        </div>
        <div class="foot">
            foot
        </div>
    </div>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
*{
    margin: 0;
}
.nva{
    width: 100%;
    height: 50px;
    position: fixed;
    border-bottom: 2px solid #FFFFFF;
/*渐变色*/
	background: linear-gradient(500deg,#099，#099);
}
.nva img{
	width: 50px;
	height:50px;
    /* 绝对定位 */
    position: absolute;
    /*圆形高度*/
    border-radius: 50%;
    overflow: hidden;
}

.left{
    width: 300px;
    height: 80%;
    bottom: 0;
    top: 52px;
    /*固定位置*/
    position: fixed;
    display: flex;
    left: 0;
    border-right: 2px solid #FFFFFF;
    /*浮动*/
    float: left;
    background: linear-gradient(3500deg,#394A58,#3280B0);
}

.right{
    position: fixed;
    height: 80%;
    top: 52px;
    right: 0;
    bottom: 0;
    left: 302px;
    color: #FFFFFF;
    overflow-y: auto;
    background-color: #F5FF00;
}

.right .rig_upper{
    width: 100%;
    height: 270px;
    top: 51px;
    background: linear-gradient(500deg,#394A58,#3280B0);
}
.right .rig_under{
        border-top: 1px solid #FFFFFF;

    width: 100%;
    height: 750px;
    background: linear-gradient(500deg,#394A58,#3280B0);

}



.foot{
    width: 100%;
    height: 80px;
    bottom: 0;
    position: fixed;
    color: #FFFFFF;
    border-top: 2px solid #FFFFFF;
	background: linear-gradient(500deg,#099,#369,#099);
}

更多推荐

HTML+css网站设计布局模板