Html和CSS布局技巧-全体布局（四）

时间：2022-11-11 11:43:50

Html和CSS布局技巧-全体布局（四）

<!-- 利用绝对定位实现 -->
<style media="screen">
    html,body,.parent{height: 100%;overflow: hidden;}
    .top,.left,.right,.bottom{text-align: center;}
    .top{position: absolute;top:0;left: 0;right: 0;height: 100px;background: #5a9bd5;}
    .left{position: absolute;top:100px;left:0;bottom: 50px;width: 200px;background: #c65a11}
    .right{position: absolute;overflow: auto;left:200px;right:0;top:100px;bottom:50px;background: #0170c0}
    .bottom{position: absolute;left:0;right:0;bottom:0;height: 50px;background: #6f31a0}
</style>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="bottom">bottom</div>
    </div>
</body>
Html和CSS布局技巧-全体布局（四）

 

<!-- 利用flex实现 -->
<style media="screen">
    html,body,.parent{height: 100%;}
    .parent{display: flex; flex-direction:column;}
    .top{height: 100px;background: #5a9bd5;}
    .bottom{height: 50px;background: #c65a11}
    .middle{flex: 1; display: flex;}
    .left{ width: 200px;background: #0170c0}
    .right{ flex: 1; overflow: auto;background: #6f31a0}
</style>
<body>
    <div class="parent">
        <div class="top">top</div>
        <div class="middle">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div class="bottom">bottom</div>
    </div>
</body>

 

标签：

相关文章