当浏览器小于内容时添加空白

Question

我最近发现了一个非常奇怪的问题 我正在为朋友制作一个wordpress主题，我正在使用相对/绝对位置在一些div的一侧添加社交/连接按钮 - 这样做可以正常设计。

然而，问题出现在页面右侧的“社交”div上。 如果浏览器小于主要内容的大小，则会在页面右侧添加额外的空白区域。如果我将div移到左侧，那很好;它只在页面长度的一半左右添加空白（这更令人困惑）。

我不能为我的生活弄清楚为什么会这样;我无法弄清楚这是一个标准的行为，还是我自己创造的一个问题。

我希望也许这里有人可能有类似的经历，或者只是想知道如何修复它。

参考网站为http://betacreations.com/example/uberpotato

编辑： #social div的CSS是：

#social{
   width: 90px; height: 250px;
   padding: 10px;
   position: absolute; right: -40px; top: 40px;
   background: #EFEFEF;
   box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}

它所在的#page-content div的CSS是：

#page-content{
   clear: both;
   min-height: 500px;
   width: 870px;
   margin: 0 auto;
   padding: 20px 0;
   position: relative;
   border: 5px solid #FFF;
   background: #F2F0D7;}

截图是：

只有当浏览器的宽度小于960px（内容的宽度）时才存在宽度

提前致谢！

Answer 1

查看您的网站后，看起来这是您的社交网站。一些生成的元素是100px或更宽。如果删除width:90px;，则可以看到它尝试实现的宽度。您可以修改这些元素并将它们的宽度设置得更小（或者设置为100％或更多），或者可以将overflow: hidden;应用于#social div：

#social {
    ...
    overflow:hidden;
}

之所以发生这种情况，是因为您的社交容器已经溢出。它只发生在右边，因为这些元素是左对齐的。 （你也可以将元素对齐到我想的那个。）

希望这有帮助。

Answer 2

据我了解 - 您希望您的模板具有响应能力。为此，您需要编写媒体查询以满足各种媒体大小和分辨率。

    /* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

为不同尺寸编写css样式，您可以使网站看起来像您想要的那样。