1

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

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

我怎样才能让“浏览图书馆”选项卡按预期显示（就像“关于作者”选项卡一样）？

谢谢，

4

3 回答 3

1

好的，让我们逐步解决（注意编辑）。

背景

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

body,html{
height:100%;
}

通常身体会适合它的内容，但position:absolute这种机制不再起作用。

还要background: #fff从 html 中删除 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 代码，我也可以帮助您。

于 2013-08-28T14:36:36.870 回答
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

于 2013-08-28T14:51:47.843 回答
0

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

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

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

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

于 2013-08-28T15:33:18.280 回答