的HTML

Question

我的代码是这样的：

HTML：

<div class="1">
  <div class="2">
  </div>
</div>

CSS：

.1 {height: 20px; width: 20px;}

我正在努力使第2类div 100%宽度和身高，而不仅仅是父div。有没有办法在不改变父div的大小的情况下做到这一点？

Answer 1

我建议使用视口百分比单位vh（视口高度）和vw（视口宽度）：

html,
body {
  margin: 0;
  padding: 0;
}
.a {
  height: 20px;
  width: 20px;
  border: 1px solid #000;
}
.b {
  height: 100vh;
  width: 100vw;
  border: 1px solid #f00;
}

<div class="a">
  <div class="b"></div>
</div>

当然，这有一点需要注意，这是视口的百分比，它不一定与视口本身的高度/宽度相同。

另外，我已经更改了类名，因为在CSS中选择一个类名或id以数字开头的元素需要正确转义该数字。它可以做到，但这是一个不必要的复杂性。

Answer 2

你可以这样做，只需将position:absolute设为儿童，width:100% height:100%

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.one {
  height: 20px;
  width: 20px;
  background: blueviolet;
}
.two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: tomato;
  z-index: -1;
}

＆＃13;

<div class="one">
  <div class="two"></div>
</div>

＆＃13;

Answer 3

假设页面的主体宽度与视口相同，则可以使用vw和vh单位，分别等于视口的宽度和视口的高度。除此之外，没有办法使用纯CSS引用无关类的高度。您可以使用JS完成它，如下所示：

document.addEventListener('DOMContentLoaded', function() {
    var body = document.getElementsByTagName("body")[0];
    var two = document.getElementsByClassName("2")[0];
    two.style.height = body.style.height;
}, false);

Answer 4

的HTML

<html>
<body>
<div id="wrap">
<div id="graph-box">
<div class="row">
<div class="GridH">

的Jquery

$(document).ready(function () {
AdjustHeight();
});

function AdjustHeight() {
var WrapH = $("#wrap").height();
if (WrapH === $("#wrap").height()) {
var GridH = "";
GridH = (50* WrapH) / 100;
}

在上面的html代码中，不论图形Div和Row Div，GridH Div的高度设置为Wrap Div的50％，而不是父Div .... 它的作品非常适合我

Answer 5

这是另一种解决方案。您可以将position: absolute提供给子元素：

.b {
    border: 1px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

请注意，没有任何父元素可以添加position: relative。

就个人而言，我会选择@David Thomas的答案，因为它应该适用于大多数情况。

有没有办法让div成为除了父母以外的东西的高度？

5 个答案:

的HTML

的Jquery