SOURCE

<div class="all">
    <!-- 头部 -->
    <div class="header">
        <div class="logo">
            logo
            <div class="sublogo">
                right
            </div>
        </div>
        <div class="navbar">
            <ul class="nav content">
                <li class="selected">首页</li>
                <li>关于</li>
                <li>介绍</li>
            </ul>
        </div>
    </div>
    <!-- 内容 -->
    <div class="main">
        
        <div class="p1 content">我是内容</div>

        <div class="p2">我是通栏内容</div>

        <div class="p1 content">我是内容</div>
        <div class="p2">我是通栏内容</div>
        <div class="p1 content">我是内容</div>


    </div>
    <!-- 尾部 -->
    <div class="footer">
        小尾巴
    </div>
</div>

*{
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
}
.all {
    width:100%;
    height: 100%;
}

/* 头部 */
.header {
    display: flex;
    flex-direction: column;
}
.header .logo {
    height: 100px;
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
.header .sublogo {
    width: 200px;
    position: absolute;
    right: 0;
}

/* 导航 */
.header .navbar {
    width:100%;
    background: blue;
    color: #fff;
}
.header .nav {
    width:100%;
    display: flex;
    flex-direction: row;

    justify-content: flex-end;
}

.nav li {
    list-style: none;
    padding: 5px 10px;
}
/* 高亮导航 */
.nav li:hover {
    background: rgba(255,255,255,0.4)
}
/* 选中导航 */
.nav li.selected {
    background: rgba(255,255,255,0.3);
}

/* 内容区域 */
.content {
    max-width: 1000px;
    margin: 0 auto;
}


/* 内容 */
.main {

}

/* 底部 */
.footer {
    background: #333;
    height: 50px;
    position: sticky;
    bottom: 0;
    width: 100%;
    color: #fff;
}


/* 测试 */

.p1 {
    background: rebeccapurple;
    height: 50px;

}
.p2 {
    background: forestgreen;
    height: 50px;
}