DIV 布局之上下布局上不动下自动适应

最新推荐文章于 2023-11-16 17:52:35 发布

魔力化

最新推荐文章于 2023-11-16 17:52:35 发布

阅读量6.2k

点赞数

分类专栏：前端文章标签： html css div div box

本文链接：https://blog.csdn.net/zhangzhenisme/article/details/102770923

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 初始化

三个div：parent 、top、bottom
parent：宽600px、高450px、红色背景、整体采用相对定位。
top：浅蓝色背景
bottom：土黄色背景

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>顶部固定下部自动适应</title>
    <style type="text/css">
      html,body {height: 100%;padding: 0; margin: 0; }
      .parent{
	    width:600px;
        height: 450px;
        margin:100px auto; 
        background-color: red;
        position: relative;
      }
      .top{
        background-color: #BBE8F2;
      }
      .bottom{
        background-color: #D9C666;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="top">top</div>
      <div class="bottom">
        bottom
      </div>
    </div>
  </body>  
</html>

2. 指定顶部高度为100

height:100px;

3. 将下部的div撑满

将下部的div定位修改成绝对定位，距离顶部距离修改成100px。底部距离为0
position: absolute; top: 100px; bottom:0;

修改底部宽度为100%
width:100%

最终代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>顶部固定下部自动适应</title>
    <style type="text/css">
      html,body {height: 100%;padding: 0; margin: 0; }
      .parent{
	    width:600px;
        height: 450px;
        margin:100px auto;
        position: relative;
        background-color: red;
      }
      .top{
        background-color: #BBE8F2;
        height:100px;
      }
      .bottom{
        background-color: #D9C666;
        position: absolute;
        top: 100px;
        bottom:0;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="top">top</div>
      <div class="bottom">
        bottom
      </div>
    </div>
  </body>  
</html>

魔力化

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
DIV 布局之上下布局上不动下自动适应

1. 初始化三个div：parent 、top、bottomparent：宽600px、高450px、红色背景、整体采用相对定位。top：浅蓝色背景bottom：土黄色背景<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;...
复制链接

扫一扫