使用absolute布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top {
            width: 100%;
            height: 40px;
            background: #000;
            color:#fff;
            position:absolute;
            top:0;
            /*以上设置是重点必须的*/
            text-align:center;
            line-height:40px;
        }
        .bottom{
            width:100%;
            height:40px;
            background:#000;
            color:#fff;
            position:absolute;
            bottom:0;
            /*以上设置是重点必须的*/
            text-align:center;
            line-height:40px;
        }
        .mainBox{
            width:100%;
            position:absolute;
            top:40px;
            bottom:40px;
            /*以上设置是重点必须的*/
        }
        .mainBox .leftBox{
            height:100%;
            width:200px;
            float:left;
            margin-bottom:40px;
            overflow: auto;
            /*以上设置是重点必须的*/
            border:6px solid green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align:center;
            line-height:40px;
        }
        .mainBox .rightBox{
            height:100%;
            margin-left:220px;
            /*以上设置是重点必须的*/
            border:6px solid crimson;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: auto;
            text-align:center;
            line-height:40px;
        }
        .left1{
            background-color: #0088cc;
            width: 100%;
            height: 60%;
        }
        .left2{
            background-color: #CCCCCC;
            width: 100%;
            height: 40%;
        }
    </style>
</head>
<body>
<div class="top">顶部,高度40px</div>
<div class="mainBox">
    <div class="leftBox"><!--左盒子,固定宽度200px,高度自适应铺满屏幕剩余高度-->
        <div class="left1"></div>
        <div class="left2"></div>
    </div>
    <div class="rightBox">右盒子,距离左盒子20px,高度自适应宽度自适应铺满屏幕剩余高度</div>
</div>
<div class="bottom">底部,高度40px</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/phermis/p/6763348.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Web网站设计中,relative和absolute布局都是常见的布局方式,它们可以帮助我们更好地控制页面元素的位置和排版。下面是它们的详细介绍: 1. relative布局 relative布局是相对布局,它是相对于元素在文档流中原本的位置进行定位的。在使用relative布局时,我们可以通过top、right、bottom、left属性来设定元素相对于原本位置的偏移量,从而实现元素的定位。例如: ```css .relative { position: relative; top: 50px; left: 100px; } ``` 上面的代码表示,将class为relative的元素相对于原本位置向下偏移50px,向右偏移100px。 2. absolute布局 absolute布局是绝对布局,它是相对于其最近的已经定位(position属性不为static)的祖先元素进行定位的。如果没有已经定位的祖先元素,则相对于body元素进行定位。在使用absolute布局时,我们可以通过top、right、bottom、left属性来设定元素相对于最近的已经定位的祖先元素的偏移量,从而实现元素的定位。例如: ```css .absolute { position: absolute; top: 50px; left: 100px; } ``` 上面的代码表示,将class为absolute的元素相对于最近的已经定位的祖先元素向下偏移50px,向右偏移100px。 总的来说,relative布局适合用于相对于元素在文档流中原本位置进行微调的情况,而absolute布局适合用于实现元素的精确定位。在实际的页面设计中,我们可以根据具体的需求来选择使用哪种布局方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值