CSS div大小和重叠问题

Question

我正在尝试帮助一位平面设计师完成她的网站http://designingforgood.tumblr.com/

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

此外，在不同的浏览器中，距照片网格上方的蓝色方框的距离会有所不同。在火狐中，它看起来比在chrome中更遥远。我担心在其他浏览器中，它甚至可能会重叠。

我在w3schools上搜索了答案，但没有找到我想要的。我也在stackoverflow上搜索了类似的问题。

Answer 1

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

Answer 2

1. 从侧边栏内的所有div中移除固定的位置。
2. 将侧边栏和缩略图都包装在另一个div中，并为该div提供一个id sidebar-container。你应该会得到你的侧边栏的主要结构：

<div id="sidebar-container">

<div id="blue-box">...</div>

<div id="photo-grid">...</div>

</div>

• Fix任何你有css的问题。确保网站在两种情况下都看起来很好，无论侧边栏有固定的位置还是没有固定的位置。也许你想让侧边栏浮动起来，以便在这两种情况下都能很好地工作。

• 使用jQuery (我看到你无论如何都会加载它)来确定#sidebar-container的高度是否小于窗口的高度，只有在那时，我们才添加window

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); 

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