2

我正在设计我网站的手机部分。我有一个顶部：0%，位置：固定的横幅图像，宽度：100%，高度：自动。当手机水平转动时，横幅图像很好地覆盖了屏幕宽度。

但是，我的问题在于将内容定位在此图像下方。例如，具有 position:absolute 和 top:20% 的 div 会在垂直屏幕的横幅下方显示一个 div。不幸的是，当水平转动屏幕时，图像会放大并覆盖 div。是否有一个 CSS 解决方案可以在任何时候抓取图像的高度并相应地调整其顶部百分比？

编辑：我也对 javascript 解决方案持开放态度 :) 谢谢。

4

1 回答 1

1

这是一种方法。

例如，如果这是 HTML：

<div class="header">
    <img src="http://www.placekitten.com/400/100">
</div>
<div class="main">Some content...</div>

您可以使用以下 CSS 来固定您的标题和绝对定位您的主块：

.header {
    position: fixed;
    top: 0px;
    left: 10px;
    right: 10px;
    border: 1px dotted blue;
}
.header img {
    width: 100%;
    vertical-align: top;
}
.main {
    border: 1px solid blue;
    position: absolute;
    top: 147px;
    left: 10px;
}

要在窗口重新调整大小时自动重新定位.main块，可以使用以下 jQuery：

function fixMainTop() {
    $(".main").css({
        "top": $(".header").outerHeight()
    });
}

fixMainTop();

$(window).resize(function () {fixMainTop();});

您fixMainTop()在页面加载时调用，然后在窗口大小更改时调用。

但是，该$resize功能可能会导致屏幕看起来有些跳跃，但我认为您可以接受这一点，因为许多使用 jQuery 的网站都表现出相同的行为。

演示小提琴：http: //jsfiddle.net/audetwebdesign/spxCj/

附言

如果网站具有固定宽度，您可能不需要该.resize操作......但很高兴了解如何完成它。

于 2013-06-16T12:08:02.933 回答