CSS，高度為：自動的圖片，在屏幕調整大小時覆蓋其下方的div（水平握住手機）

Question

我正在設計網站的手機部分。 我有一個，頂部：0％，位置：固定，橫幅圖像，寬度：100％，高度：自動。 當電話水平轉動時，橫幅圖像會很好地縮放，覆蓋整個屏幕寬度。

但是我的問題是將內容定位在此圖像下方。 例如，具有position：absolute和top：20％的div在橫幅下方顯示垂直屏幕的div。 不幸的是，水平旋轉屏幕時，圖像會放大並覆蓋div。 是否有CSS解決方案可以隨時捕獲圖像的高度並相應地調整其最高百分比？

編輯：我也開放給javascript解決方案:)謝謝。

Answer 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/

PS

如果網站的寬度固定，則可能不需要.resize操作...，但是很高興知道如何完成此操作。