Question

我在设置模态窗口内的内容的高度属性时遇到问题。

我希望模态窗口中的内容为100％，但问题是它只会高达约30％。为什么会发生这种情况？如何让模态窗口中的内容能够填充模态窗口，而不是填充大约30％，从而启用滚动条？

下面是模态窗口的宽度，很好：

#simplemodal-container {height:75%; width:50%;}

以下是iframe的高度和宽度：

$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');

最后下面是进入模态窗口的内容（我确实将此高度设置为100％，但是我无法使其工作，因此它目前没有高度属性：

<div id="previouslink">
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>
<h1>PREVIOUS QUESTIONS</h1>

<p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

<form action="previousquestions.php" method="post" id="modalform">
      <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
      <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
      </form>

</div>

您可以通过访问此link然后点击加号按钮来查看模态窗口。

谢谢

Answer 1

添加此样式：

#simplemodal-data {height: 100%}

Answer 2

如果文档正文本身没有填充窗口，则会发生这种情况 - 文档高度小于窗口高度。通常，解决方案是这样的：

body {
  padding-bottom: 1500px;
}

或者，一旦将代码放入真实环境中，文档总是高于窗口，这可能不是问题。

如何在这个例子中整理高度属性？

2 个答案: