Question

我正在尝试通过她的网站http://designingforgood.tumblr.com/

帮助平面设计师

她想要SnapWidget，它是左下方六张照片的网格，所以我把它放在那里。我担心的是它会在较小的窗口中被切断，这可能意味着在较小的屏幕上它也将无法正常显示。

此外，在不同的浏览器中，与照片网格上方的蓝色框的距离会发生变化。它在firefox中看起来比在chrome中更远。我担心在其他浏览器中它甚至可能最终重叠。

我在w3schools上搜索了一个答案，但没找到我要找的东西。我还在stackoverflow上搜索了类似的问题。

Answer 1

您的div包含您的照片的内嵌样式，其position设置为fixed。您的侧边栏也设置为fixed。确保该部分可滚动的唯一方法是删除这两个值并从那里修复它。

Answer 2

移除侧栏内所有div固定的位置。
将侧边栏和缩略图包裹在另一个div中，并为此div添加一个ID sidebar-container。您最终应该使用侧边栏的主要结构：

<div id="sidebar-container"> <div id="blue-box">...</div> <div id="photo-grid">...</div> </div>
修复您遇到的任何问题。确保网站在两种情况下看起来都很好，侧边栏有固定位置但没有。也许你想在两种情况下浮动侧边栏以便正常工作。
使用jQuery（我看到你无论如何加载它）来确定#sidebar-container的高度是否小于窗口的高度，然后我们才添加position:fixed;。

jQuery代码可能是这样的：

function checkHeight() {
  var sidebarHeight = jQuery("#sidebar-container").height();
  var windowHeight = jQuery(window).height();

  if( sidebarHeight <= windowHeight ) {
    jQuery("#sidebar-container").css({ 'position' : 'fixed' });
  } else {
    jQuery("#sidebar-container").removeAttr("style");
  }
}

jQuery(document).ready(checkHeight);
jQuery(window).resize(checkHeight);

因此，具有大屏幕的用户将受益于固定侧边栏，具有小屏幕的用户将能够通过向下滚动来查看整个侧边栏。

CSS div大小和重叠问题

2 个答案: