常见工作站布局

常见工作站布局_第1张图片

<!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>

常见工作站布局_第2张图片

<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>

常见工作站布局_第3张图片

<!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>

你可能感兴趣的:(工作,布局)