主页 / 问题 / 987663
Accepted
Товарищ_Котейка
Asked:2020-05-31 13:46:51 +0000 UTC2020-05-31 13:46:51 +0000 UTC

在页面上定位 div

  • 772

请帮忙，我无法弄清楚问题所在。有一个页面，我在其中添加了三个块并在 css 中为它们分配属性：

.div_1 {
	position: absolute;
	background: #000;
	height: 66px;
	width: 100%;
	left: 0%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	z-index: 2;
}
.div_2 {
	position: absolute;
	background: #29313C;
	height: 100%;
	width: 80px;
	left: 0%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	z-index: 1;
}

.div_3 {
	position: absolute;
	background: #f2f2f2;
	height: 92.85%;
	width: 95.5%;
	left: 80px;
	right: 0%;
	top: 66px;
	bottom: 0%;
	z-index: 1;
}
<html>
	<head>
		<link href="test.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="div_1"></div>
		<div class="div_2"></div>
		<div class="div_3"></div>
	</body>
</html>

事实证明，当我缩小浏览器窗口时，div_3 超出了 div_1 的大小。告诉我可能是什么问题？

html

1 个回答

  1. Best Answer

    我稍微修改了第三块的css，我想这就是你所需要的。

    .div_1 {
  position: absolute;
  background: #000;
  height: 66px;
  width: 100%;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  z-index: 2;
}

.div_2 {
  position: absolute;
  background: #29313C;
  height: 100%;
  width: 80px;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  z-index: 1;
}

.div_3 {
  position: absolute;
  background: #f2f2f2;
  height: 100% - 66px;
  width: 100% - 80px;
  left: 80px;
  right: 0%;
  top: 66px;
  bottom: 0%;
  z-index: 1;
}
    <div class="div_1"></div>
<div class="div_2"></div>
<div class="div_3"></div>

    • 0

相关问题