Question

我有一个div容器和一个div内容。内容大小具有固定的高度和宽度。我希望容器具有相对大小（百分比），但是当我不使用固定像素值时，无论我指定的百分比如何，高度似乎都是100％...

HTML：

<div class="container">
  <div class="content">
  Content
  </div>
</div>

Css：

.container {
  overflow: auto;
  height: 50%;  /* percentage value does not work */
}

.content {
  background-color: blue;
  width: 800px;
  height: 600px;
  overflow: hidden;
}

https://jsfiddle.net/LePioo/2pcaq45x/55/

Answer 1

我不知道这是否是您要实现的目标，但是您可以在容器上使用vh，滚动条将出现，并且div内容将保持您自己的大小。

.container {
  overflow: auto;
  height: 50vw; 
}

Answer 2

使用百分比高度将不起作用，因为height属性没有任何度量高度的依据。如果交换了div属性，并且容器的高度为600px，则内容div将继承该高度测量值；如果将其高度设置为50％，则如果您明白我的意思，它将仅达到300px。容器div中除了其他div外没有任何内容，并且没有可继承的父对象。

简而言之，您应使用vh（垂直高度）作为动态高度。

.container {
  display: inline-block;
  overflow: auto;
  height: 50vh; 
}

.content {
  background-color: blue;
  width: 800px;
  height: 600px;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  
<div class="container">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis lacus dolor, ut pretium metus luctus volutpat. Nulla eleifend purus bibendum lectus posuere, non feugiat lorem porttitor. Aenean at sapien est. Vivamus urna massa, vestibulum at augue sit amet, vehicula fermentum justo. Mauris vulputate dictum sapien fermentum scelerisque. Vestibulum id augue feugiat, laoreet libero non, aliquam dolor. Vestibulum molestie, arcu a tincidunt maximus, ipsum urna euismod lectus, ac eleifend erat neque vitae nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non diam sed diam aliquam sodales sodales gravida lectus. Nunc elementum mauris a convallis dignissim. Phasellus augue tortor, tincidunt eget leo vitae, semper auctor est. Donec posuere diam ut venenatis laoreet. Sed ac metus eleifend, iaculis tortor vel, finibus nibh. Aliquam imperdiet, felis id tincidunt maximus, purus libero fermentum tellus, non suscipit ante magna a tortor. Sed finibus, risus nec laoreet ullamcorper, lectus ipsum consectetur magna, et condimentum neque quam non libero. Pellentesque bibendum, turpis eu lacinia varius, est massa placerat ante, vitae convallis purus orci volutpat tellus.
  </div>
</div>
</body>
</html>

继承的/切碎的高度的插图（溢出设置为滚动，以便您看到边界）

.container {
  display: inline-block;
  overflow: scroll;
   width: 400px;
  height: 200px;
}

.content {
  background-color: blue;
 height:50%;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  
<div class="container">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis lacus dolor, ut pretium metus luctus volutpat. Nulla eleifend purus bibendum lectus posuere, non feugiat lorem porttitor. Aenean at sapien est. Vivamus urna massa, vestibulum at augue sit amet, vehicula fermentum justo. Mauris vulputate dictum sapien fermentum scelerisque. Vestibulum id augue feugiat, laoreet libero non, aliquam dolor. Vestibulum molestie, arcu a tincidunt maximus, ipsum urna euismod lectus, ac eleifend erat neque vitae nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non diam sed diam aliquam sodales sodales gravida lectus. Nunc elementum mauris a convallis dignissim. Phasellus augue tortor, tincidunt eget leo vitae, semper auctor est. Donec posuere diam ut venenatis laoreet. Sed ac metus eleifend, iaculis tortor vel, finibus nibh. Aliquam imperdiet, felis id tincidunt maximus, purus libero fermentum tellus, non suscipit ante magna a tortor. Sed finibus, risus nec laoreet ullamcorper, lectus ipsum consectetur magna, et condimentum neque quam non libero. Pellentesque bibendum, turpis eu lacinia varius, est massa placerat ante, vitae convallis purus orci volutpat tellus.
  </div>
</div>
</body>
</html>

可滚动的内容分成百分比大小的div

2 个答案: