包含表单的 Div 没有占据整个页面
Posted
技术标签:
【中文标题】包含表单的 Div 没有占据整个页面【英文标题】：Div containing a form isn't taking up the entire page 【发布时间】：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并点击“点击这里” 【参考方案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; 抱歉，我认为这不是您想要的。我回家后看看。您能否在 *** 上提供一个 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 中。
【讨论】：
以上是关于包含表单的 Div 没有占据整个页面的主要内容，如果未能解决你的问题，请参考以下文章
容器的宽度/div的宽度即使换成不同的屏幕分辨率也不会占据页面的整个宽度