Question

在 cjshayward.com/index_new.html ，主体内容周围有一个包装器div，大约1000像素宽，并且可以正常运行Chrome和Firefox中的前100个像素。接下来页面是一个jQuery UI选项卡集，包含一个固定宽度的手风琴，接近jQuery.load（）ed简单旧的简单HTML。

然而，在“浏览图书馆”标签（但不是“关于作者”）上，当前打开并且包含固定宽度的手风琴，低于100或150px以下，标签下的区域似乎有宽度与窗口相同;它具有正确的左边距，并且水平滚动与右边明显相等的距离。此外，身体背景图块不显示;整个宽度为白色，如包装div内部所指定的那样。

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

谢谢，

Answer 1

好吧，让我们一步一步解决方案（注意编辑）。

背景

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

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保存的内容具有固定的大小设置。删除该尺寸使其适合包装。

宽度似乎是在load事件中按照javascript设置的，所以我无法帮助你。提供你的.js代码，也可以帮助你。

Answer 2

你绝对定位太多，这会破坏事物的流动。我将通过一系列编辑来完成这项工作。

/* 
  #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

Answer 3

如评论中所述，您的布局问题基于您使用绝对定位而非流程布局：

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

我会再次开始，专注于使用花车进行布局，而不是绝对定位。

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

如何才能正确包含在包装器div中？

3 个答案:

背景

包装