如何使我的布局在所有分辨率下看起来都一样？

Question

我只是在这里学习并尝试了所有不同类型的 div（绝对、相对、固定等），但我真的很难弄清楚这一点。

这是我正在开发的网站：http://www.chelseyburch.com

在我的电脑上，分辨率为 1366 x 768，它看起来正是我想要的样子。但是当我尝试任何其他分辨率或更改浏览器大小时，标题和滑块之间会出现大量空间。此外，使用画廊轮播滑块（在人物、地点、事物链接上），图像之间有很大的空间。

如果这似乎是一个愚蠢的问题，我很抱歉，但我真的很难弄清楚如何使它在所有分辨率下看起来都一样。

这就是它的样子。我知道它到处都是，这就是我寻求帮助的原因。提前致谢。

#header {
    float: left;
    position: relative;
    margin: 30px;
}

#social {
    float: right;
    position: fixed;
    top: 30px;
    right: 0;
    margin: 5px;
}

#slidy-container {
    width: 100%; 
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0;
}

.jcarousel-wrapper {
    height: 480px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}

Answer 1

您将#slidy-container 定位为绝对位置，并使用bottom:0 放置在底部。尝试将其更改为：

#slidy-container {
  width: 100%; 
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 130px; /* change this value to your header height */
}

但这仅适用于大于 800 像素的分辨率。如果您需要更低的分辨率，请尝试媒体查询并为 800 像素以下的分辨率创建新的 css 布局：

@media (min-width: 800px) {
    #slidy-container {
        top: 300px;
    }
}

Answer 2

试试这个

#slidy-container{
  width: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 150px;  /* this is the line I changed */
}

我删除了底部，这在不同的分辨率下搞砸了，并替换为顶部：150px。