0

我正在尝试通过她的网站http://designingforgood.tumblr.com/帮助平面设计师

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

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

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

4

2 回答 2

0

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

于 2013-04-14T06:39:09.197 回答
0

  1. 从侧边栏内的所有 div 中删除固定位置。

  2. 将侧边栏和缩略图都包裹在另一个 div 中，并给sidebar-container这个 div 一个 id。您应该最终得到侧边栏的主要结构：

    <div id="sidebar-container">
    <div id="blue-box">...</div>
    <div id="photo-grid">...</div>
    </div>

  3. 修复您遇到的任何 CSS 问题。确保网站在两种情况下看起来都很好，当侧边栏有固定位置时，当它没有时。也许您想让侧边栏在这两种情况下都能正常工作。

  4. 使用 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);

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

于 2013-04-14T06:49:00.963 回答