CSS同时设置绝对定位top和bottom属性

最新推荐文章于 2022-10-28 17:07:54 发布

陈适时

最新推荐文章于 2022-10-28 17:07:54 发布

阅读量2.7k

点赞数 2

分类专栏：前端 css 项目开发文章标签： css html5 定位

本文链接：https://blog.csdn.net/weixin_47966295/article/details/117045675

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

项目开发

2 篇文章 0 订阅

订阅专栏

问题引出

最近在用html+css+js做一个web后台管理系统左边侧边栏时出现了父元素定义为绝对定位时脱标，导致子元素无法撑开父元素高度的问题。

但是希望实现如下效果，左边导航栏将剩余全部位置占满，即使上面只有4个下面也可以占满
在这里插入图片描述
代码如下：
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>

<body>
  <div id="root">
    <div id="header"></div>
    <div id="main">
      <div class="main-left">
        <ul>
          <li class="nav">增</li>
          <li class="nav">删</li>
          <li class="nav">改</li>
          <li class="nav">查</li>
        </ul>

      </div>
      <div class="main-right"></div>
    </div>
  </div>
</body>

</html>

index.css（我是用less生成的css，其实一样，方便初学者）

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #424a61;
}

#header {
  height: 49px;
  background-color: #202329;
}

#main {
  position: relative;
}

.main-left {
  float: left;
  position: absolute;
  width: 180px;
  background-color: #d9dee4;
}

.main-left .nav {
  display: block;
  width: 180px;
  height: 60px;
  background-color: pink;
}

解决问题步骤

为了将下面填充完，于是我第一时间想到将父盒子（class=“main-left”）设置高度，但我的高度该设置多少好呢？我希望它能够兼容不同的浏览器、显示屏分辨率，所以肯定不能写死高度。

然后就开启了我漫漫探索之路（其实是自己踩坑了），请大家记住类名，接下来以类名来讲解！

方法1：设置main-left的高度height（固定值300px）

代码如下

.main-left {
  float: left;
  position: absolute;
  width: 180px;
  height: 300px;
  background-color: #fff;
  background-color: #d9dee4;
}

效果图（灰色为多出来的）
在这里插入图片描述
但是这里的缺陷是：高度不是动态变化的，而是写死的，如果遇到不同屏幕分辨率的电脑就会有问题。

方法2：设置main-left的top和bottom均为0

为了不写死main-left的高度，通过以前的经验，外加查找资料，发现有设置绝对定位元素的top和bottom为0这种方法来拉长元素，于是我马上开始设置，发现还是有问题存在。
代码如下

.main-left {
  float: left;
  position: absolute;
  width: 180px;
  top: 0;
  bottom: 0;
  background-color: #fff;
  background-color: #d9dee4;
}

效果图如下：
在这里插入图片描述
发现原来的问题还存在，无法拉长元素。**经过我自己的排查，最后发现是我布局的问题！前面埋下的坑（经典子绝父相），导致了main-left的绝对定位是以main为准，而main的高度是由子元素撑开的，此时main的高度也为0（main-left脱标，main-right未设置宽高），于是我在这里绕来绕去，最后发现是这里的问题！！！**找出问题后，马上进行修改，将main内的position:relative删去，再给margin-left的top一个值（因为此时绝对定位相对于浏览器来进行定位）即可完成效果。
完整代码如下：
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>

<body>
  <div id="root">
    <div id="header"></div>
    <div id="main">
      <div class="main-left">
        <ul>
          <li class="nav">增</li>
          <li class="nav">删</li>
          <li class="nav">改</li>
          <li class="nav">查</li>
        </ul>

      </div>
      <div class="main-right"></div>
    </div>
  </div>
</body>

</html>

index.css

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #424a61;
}

#header {
  height: 49px;
  background-color: #202329;
}

.main-left {
  float: left;
  position: absolute;
  width: 180px;
  top: 49px;
  bottom: 0px;
  background-color: #d9dee4;
}

.main-left .nav {
  display: block;
  width: 180px;
  height: 60px;
  background-color: pink;
}

最终效果图：
在这里插入图片描述

至此，问题解决！

陈适时

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS同时设置绝对定位top和bottom属性

问题引出最近在用html+css+js做一个web后台管理系统左边侧边栏时出现了父元素定义为绝对定位时脱标，导致子元素无法撑开父元素高度的问题。但是希望实现如下效果，左边导航栏将剩余全部位置占满，即使上面只有4个下面也可以占满代码如下：index.html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" c
复制链接

扫一扫