常见工作站布局（左边定宽右边自适应）

最新推荐文章于 2025-05-20 15:43:51 发布

原创最新推荐文章于 2025-05-20 15:43:51 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#工作 #布局

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文探讨了常见的一种工作站布局方式，即左侧区域设定固定宽度，右侧区域根据剩余空间自适应调整宽度。这种布局常用于提高工作效率，使用户能够清晰地划分工作区域和浏览内容。通过CSS样式实现，可以灵活应用于各种网页和应用设计。

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            body{
                min-width: 1200px;
                overflow: hidden;
            }
            .left {
                width: 200px;
                background: blue;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
                overflow-y: auto;
            }

            .right {
                margin-left: 200px;
                /*height: auto;*/
                border: 1px solid red;
                background: red;
            }

            .wb {
                height: 48px;
                width: 100%;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <div class="left"></div>
        <div class="right">
            <div class="wb"></div>
        </div>
    </body>

</html>

这里写图片描述

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.middle,.bottom{
    position: absolute;
    left: 0;
    right: 0;
}
.top{
    top: 0;
    height: 50px;
}
.bottom{
    bottom: 0;
    height: 50px;
}
.middle{
    top: 50px;
    bottom: 50px;
}
.left,.right{
    position: absolute;
    top: 0;
    bottom: 0;
}
.left{
    width:100px;
}
.right{
    left: 120px;
    right: 0;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
</style>
复制代码
复制代码
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div> 
    <div class="middle" style="background-color: pink;">
        <div class="left" style="background-color: orange;">
            <p>left</p>
        </div>     
        <div class="right" style="background-color: lightsalmon;">
            <div class="right-in">
                <p>right</p>
            </div>            
        </div>                    
    </div>              
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>        
</div>

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            .main {
                width: 500px;
                height: 300px;
                background: pink;
                border: 1px solid red;
                position: relative;
            }

            .left,
            .right {
                float: left;
            }

            .left {
                position: absolute;
                width: 100px;
                height: 100%;
                background: red;
            }

            .right {
                position: absolute;
                right: 0px;
                left: 120px;
                height: 100%;
                background: blue;
                overflow-y: scroll;
            }

            .right-1 {
                width: 100%;
                height: 1000px;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="left">

            </div>
            <div class="right">
                <div class="right-1">aaaaaaaaa</div>
            </div>
        </div>
    </body>

</html>

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            html,
            body {
                width: 100%;
                height: 300px;
            }

            .main {
                box-sizing: border-box;
                padding: 0 10px;
                width: 100%;
                height: 300px;
                position: relative;
            }

            .main0 {
                width: 100px;
                height: 300px;
                position: absolute;
                background: red;
            }

            .main1 {
                width: 100%;
                height: 300px;
                box-sizing: border-box;
                padding-left: 100px;
                background: green;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="main0">
                AAAAAAA
            </div>
            <div class="main1">
                BBBBBBBBB
            </div>
        </div>
    </body>

</html>