Question

我当前正在创建一个网页，其中弹出框随即打开，其中包含动态内容。

弹出窗口本身的最大高度应为窗口的98％->溢出中的小型设备上没有内容。内容可以由浮动的不同元素组成，其宽度由引导程序列管理。它们的高度应由其内容确定，但不能超过弹出窗口的高度。这些内容框可以根据屏幕尺寸相互浮动。

由于所有内容都是动态的，因此在渲染所有内容之前高度是未知的，几乎每个框中都可能有滚动条。

html,
body {
  float: left;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: "Roboto Condensed", sans-serif;
  overflow-x: hidden;
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clearfix {
  height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="responsive.css">
  <!-- Favicon -->

</head>

<body>
  <div id="wrapper" style="height: 100%; width; 100%">
    <!-- simple full size wrapper -->
    <div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
      <!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window  -->
      <div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
        <div id="leftContent" class="col-sm-12" style="background-color: red;">
          <!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
        <div id="rightContent" class="col-sm-6" style="height: 100%; background-color: green; overflow: auto;">
          <!-- rightContent - can be small, but max 100% of height, then scrollbar -->
          <div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
          <!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
        </div>
      </div>
      <div>
      </div>
</body>

</html>

仅当您向#dynamicPopup添加特定高度（例如400px）时，示例代码才起作用。

有什么方法只能使用CSS和HTML来解决吗？

Answer 1

您的#wrapper必须具有position: fixed;，因此它的高度是相对于窗口的，而不是body。然后#dynamicPopup会按照您期望的方式工作。这就是弹出窗口（模式）的工作方式。

这是您要实现的目标的一个很好的例子：
https://codepen.io/jzilg/pen/vEmQrm

，我不知道您为什么浮动html和body。我以前从未见过这样的东西。尝试避免它。

html,
body {
  margin: 0px;
  padding: 0px;
  font-family: "Roboto Condensed", sans-serif;
  overflow-x: hidden;
}
#wrapper {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clearfix {
  height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="responsive.css">
  <!-- Favicon -->

</head>

<body>
  <div id="wrapper" style="height: 100%; width; 100%">
    <!-- simple full size wrapper -->
    <div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
      <!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window  -->
      <div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
        <div id="leftContent" class="col-sm-12" style="height: 49vh; overflow: auto; background-color: red;">
          <!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
        <div id="rightContent" class="col-sm-6" style="height: 49vh; background-color: green; overflow: auto;">
          <!-- rightContent - can be small, but max 100% of height, then scrollbar -->
          <div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
          <!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
        </div>
      </div>
      <div>
      </div>
</body>

</html>

动态高度弹出框，带有浮动内容框和滚动条（如果需要）

1 个答案: