Javascript CSS，图像高度：自动，屏幕调整时覆盖下方的div（手机水平放置）

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

然而，我的问题是如何在这张图片下面定位内容。例如，位置为绝对且顶部为20%的div在横幅下方显示垂直屏幕的div。不幸的是，当水平旋转屏幕时，图像会放大，并覆盖div。是否有一种CSS解决方案可以抓住图像在任意点的高度，并相应地调整其顶部百分比

---

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

这里有一种方法

例如，如果这是HTML：

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

要在窗口重新调整大小时自动重新定位

.main

块，可以使用 以下jQuery：

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

fixMainTop();

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

加载页面时调用

fixMainTop（）

，然后在窗口大小更改时调用

然而，

$resize

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

演示小提琴：

PS

---

如果网站具有固定宽度，则可能不需要

.resize

操作。。。但看看如何做到这一点很好。

简短的回答是：不，您需要一个JavaScript辅助解决方案。如果可以接受，请重新表述你的问题。该死。我希望有一个CSS解决方案……用javascript处理这个问题最简单的方法是什么？干杯。是的，我也在这个网站上实现了Jquery和插件。你能不能不使用

@media-only屏幕和（最大设备宽度：480px）和（方向：横向）{}

在移动设备上定位横向？（在横向模式下，您可以为图像和内容设置单独的流体

div

容器，设置为

display:none；

在网站的桌面或纵向版本上）@adaam问题在于固定的标题，该标题没有流动，因此，下面的块元素需要知道固定页眉元素的高度，以获得右上偏移（或边距或填充）。媒体查询本身无法做到这一点，但根据总体设计，可能会提供其他优势。这真是太棒了。你帮我省了几个小时自己想办法。如果你在墨尔本，我会给你买杯啤酒：）不客气！我不常去墨尔本，但这种想法是最受欢迎的！如果不喝一品脱的话，投票结果将是盛大的。祝你一切顺利！

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

fixMainTop();

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