包含表单的 Div 没有占据整个页面答案

【问题标题】：Div containing a form isn't taking up the entire page包含表单的 Div 没有占据整个页面
【发布时间】：2015-10-20 08:45:36
【问题描述】：

我创建了一个包含 Div 的灯箱链接。在 div 元素中有一个表单，但是 div 没有扩展到页面正文的 100%。有谁知道为什么？

代码如下：

CSS：

<!DOCTYPE html>
<html>
<head>

  <style>
  @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

  body {
  background-color: #C13E18;
  width: 750px;
  overflow:scroll;
    overflow-x:hidden;
  }

.form {
width: 100%;
float: left;

}

</style>
</head>

HTML：

<body>
<div id=bookingpage>

<div id="form"> <object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui</div>" style="overflow:auto;">
    </object></div></div>
</body>
</html>

【问题讨论】：

也可以找到链接here并点击“点击这里”

标签： html css wordpress forms lightbox

【解决方案1】：

您正在将样式应用于名为“form”的类。

您的实际 div 没有具有表单 ID 的类。哈希标签是 ID 选择器。

当前

.form {
   width: 100%;
   float: left;
}

应该是

   #form {
       width: 100%;
       float: left;
    }

您可能还必须为对象指定 100% 的宽度：

#form, #form object{
  width: 100%;
  float: left;
}

【讨论】：

太棒了！这将它扩展到页面的宽度，但它仍然强制溢出滚动条的高度。即使我添加“高度：100%”。有什么想法吗？
如果你不想溢出，你可以做 overflow:none;
抱歉，我认为这不是您想要的。我回家后看看。您能否在 StackOverflow 上提供一个 JSFiddle 或其他东西或代码 sn-p，以便我们可以看到它的运行情况。 @马克
我似乎无法让它在 JSFiddle 上运行，但是代码是实时的 here。只需在页面加载时单击“单击此处”链接即可启动灯箱框架。
有什么想法吗？我不得不为此屏住呼吸

【解决方案2】：

#form {
width: 100%;
float: left;

}

在 css 上，任何以点开头的项目都是类，以 # 开头的项目是 id。

【讨论】：

感谢您注意到这一点！我已经改变了，但是它仍然没有垂直填充整个父 div 并且有一个导航滚动条

【解决方案3】：

您的正文脚本不正确。

<!DOCTYPE html>
<html>
<head>

  <style>
  @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

  body {
  background-color: #C13E18;
  width: 750px;
  overflow:scroll;
    overflow-x:hidden;
  }

#form {
width: 100%;
float: left;

}

</style>
</head>
  <body>
    <div id=bookingpage>
      <div id="form"> 
        <object type="text/html" data="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=nb3dui" style="overflow:auto;">
        </object>
      </div>
    </div>
  </body>
</html>

您将关闭 div 放在数据 url 中。

【讨论】：