Question

我有以下代码，其中div绝对位于相对容器内。相对div的height设置为0，padding-bottom设置为100%，因为内部内容将动态加载，因此外部容器会被设置为div尺寸应保持不变。

我的内部div有许多.container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .right-modal { position: absolute; top: 0; right: 0; bottom: 0; width: 200px; } .my-frame-container { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; } .my-frame-content { position: absolute; height: 100%; width: 100%; }个元素，其高度与外部div的高度相交，但外部div的高度设置为与宽度相同的值。

CSS：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="right-modal">
      <div class="my-frame-container">
        <div class="my-frame-content">
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
          <div class="box"> Hello </div>
       </div>
     </div>
    </div>
  </div>

</body>
</html>

HTML：

my-frame-container

我想知道代码中div my-frame-container的高度如何具有值200px。

以下是js bin的link。

准确地说，我没有在任何样式中将高度明确设置为200px，但仍然为什么div my-frame-content和<Window.Resources> <Style x:Key="GridStyle" TargetType="{x:Type Grid}"> <Style.Resources> <Storyboard x:Key="GridStoryBoard" > <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="-358" /> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </Style.Resources> </Style> <Style x:Key="ButtonStyle" TargetType="{x:Type Button}"> <Style.Triggers> <EventTrigger RoutedEvent="ButtonBase.Click"> <BeginStoryboard Storyboard="{StaticResource GridStoryBoard}" /> </EventTrigger> </Style.Triggers> </Style> </Window.Resources>的高度设置为200px。 / p>

Answer 1

就像我在评论中所说，这是因为浏览器会在弹出工具提示中显示大小时将height和padding的值加在一起。

如果您要查看下面的开发人员工具部分中的样式，它确实提到200×0的大小和200的填充。

Answer 2

因为你将div设置在另一个div下，而右侧模态是你给出的高度为200 px

当未在任何地方明确设置高度时，为什么div的高度设置为200px？

2 个答案: