如何将内容正确包含在包装器 div 中？答案

【问题标题】：How can I get things properly contained in a wrapper div?如何将内容正确包含在包装器 div 中？
【发布时间】：2013-08-28 14:25:44
【问题描述】：

在 cjshayward.com/index_new.html 处，有一个围绕正文内容的包装 div，大约 1000 像素宽，它适用于 Chrome 和 Firefox 中的前 100 左右像素。页面下方是一组 jQuery UI 选项卡，其中包含一个固定宽度的手风琴和类似于 jQuery.load()ed 的普通旧 HTML。

但是，在“浏览图书馆”选项卡（但不是“关于作者”）上，该选项卡当前打开并且包含固定宽度的手风琴，向下 100 或 150 像素以下，选项卡下的区域似乎有与窗口宽度相同；它有正确的左边距，并且水平滚动到右边明显相等的距离。此外，正文背景图块不显示；整个宽度都是白色的，正如为包装 div 的内部指定的那样。

如何让“浏览图书馆”标签按预期显示（就像“关于作者”标签一样）？

谢谢，

【问题讨论】：

你有什么理由绝对定位所有东西？这真的是让你的布局来处理。
我浏览了您的网站并快速切换所有内容，使其静态定位（宽度浮动，而不是绝对值），这解决了问题。还有一些其他问题。您可能需要查看如何从顶层开始设置 HTML。
@roboobeus，请说明您的 cmets 作为答案，以便我接受。

标签： html css jquery-ui jquery-ui-tabs jquery-ui-accordion

【解决方案1】：

您绝对定位得太多了，这会破坏事情的流程。我将列出您可以执行的编辑列表。

/* 
  #accordion and #details will be floated, so we'll need to 
  clear #tabs. Add this property.
*/
#tabs {
  overflow: hidden;
}

/* 
  Remove the absolute positioning from #accordion, along 
  with the top and left properties and do this instead.
*/
#accordion {
  float: left;
  width: 400px; /* This already exists */
  margin: 0 10px 0 0;
}

/* 
  Remove the absolute positioning from #details, along 
  with the top and left properties and do this instead.
*/
#details {
  float: left;
  width: 580px;
}

这会让你更接近。您还应该尽量避免在这些元素上使用高度。让内容决定高度。

这是我最终进行这些编辑的结果：http://i.imgur.com/niizuoR.png

【讨论】：

【解决方案2】：

好的，让我们逐步解决（注意修改）。

背景

您的背景设置在正文中。所以需要将正文扩展以填满整个页面。我会推荐这种方式，但还有其他方式。

body,html{
height:100%;
}

通常情况下，正文会适合其内容，但使用position:absolute，此机制不再起作用。

同时从 html 中删除 background: #fff css (normalize.css)。

html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

您的背景也会随着您的内容滚动。设置background-atachment: fixed 来改变它。

包装器

保持白色背景的包装也同样重要。也将其高度设置为 100%。

div#main {
height: 100%;
}

你的内容比你的包装大的原因是

<div id="details" style="width: 713px; height: 0px;">

这个包含内容的 div 有一个固定的大小集。删除该尺寸使其适合包装纸。

宽度似乎是在加载事件中根据 javascript 设置的，所以我无法为您提供帮助。提供您的 .js 代码，我也可以帮助您。

【讨论】：

【解决方案3】：

如 cmets 所述，您的布局问题是基于您使用绝对定位而不是流布局：

我浏览了您的网站并快速切换所有内容，使其静态定位（宽度浮动，而不是绝对值），这解决了问题。还有一些其他问题。您可能需要查看如何从顶层开始设置 HTML。

我会重新开始，专注于在布局中使用浮动，而不是绝对定位。

关于这样做的基本示例，这是一个超级简单的页面：http://cdpn.io/kmCFy

【讨论】：