Question

如何使子div成为位置绝对固定父容器的100％高度？

HTML

<div class="parent">
  <div class="child">
  </div>
</div>

CSS

.parent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}

Answer 1

也给孩子绝对位置，身高100％;

.child {
position:absolute;
height: 100%;

}

但如果你不想让孩子绝对，那么给它位置相对和身高100％;

.child {
position:relative;
height: 100%;

}

简单。
如果你愿意，我可以给你举例。

Answer 2

对子div使用100％高度，比如

.Child{
height:100%;
}

Answer 3

一个想法是创建父元素flex容器，以便默认情况下拉伸子元素：

＆＃13;

.parent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid red;
  display: flex;
}

.child {
  background: blue;
}

＆＃13;

<div class="parent">
  <div class="child">
    text
  </div>
</div>

＆＃13;

Answer 4

这很简单：JSFiddle

您只需为您的孩子div添加100％的身高。为了表明它确实有效，我更改了父div的顶部和底部，以便您可以看到该子项是其父级的100％。

.parent {
  position: absolute;
  top: 25px;
  right: 0;
  bottom: 25px;
  left: 0;
  background: steelblue;
}

.child {
  height: 100%;
  width: 50%;
  background: pink;
}

Answer 5

这里是另一种选择：

在父母上使用position: relative，在孩子上使用height: 100%

<div class="parent">
  <div class="child">
    child
  </div>
</div>

.parent {
  position: relative;  
}
.child {
  position: absolute;
  height: 100%;  
}

这里是codepen demo

Answer 6

你应该给孩子div高100vh的高度，如

// Set working directory and create process
var workingDirectory = Path.GetFullPath("Scripts");
var process = new Process
{
    StartInfo = new ProcessStartInfo
    {
        FileName = "cmd.exe",
        RedirectStandardInput = true,
        UseShellExecute = false,
        RedirectStandardOutput = true,
        WorkingDirectory = workingDirectory
    }
};
process.Start();
// Pass multiple commands to cmd.exe
using (var sw = process.StandardInput)
{
    if (sw.BaseStream.CanWrite)
    {
        // Vital to activate Anaconda
        sw.WriteLine("C:\\PathToAnaconda\\anaconda3\\Scripts\\activate.bat");
        // Activate your environment
        sw.WriteLine("activate your-environment");
        // Any other commands you want to run
        sw.WriteLine("set KERAS_BACKEND=tensorflow");
        // run your script. You can also pass in arguments
        sw.WriteLine("python YourScript.py");
    }
}

// read multiple output lines
while (!process.StandardOutput.EndOfStream)
{
    var line = process.StandardOutput.ReadLine();
    Console.WriteLine(line);
}

如何使子div成为位置绝对父容器的100％高度

6 个答案: