由於最小高度不正確的頭圖像，我們可以通過jQuery或其他方式修復它

這裏是我的fiddle，當我最小化窗口時，標題的高度設置爲最小高度：80px，因爲它在響應那裏是標題圖像下方的空白區域，有沒有添加最小高度的任何方法，標題高度應該自動調整？由於最小高度不正確的頭圖像，我們可以通過jQuery或其他方式修復它

注：爲什麼我加分高的原因：80px到標題，因爲在我的CSS所有的包裝都在固定的位置

HTML -

<div class="wrapper"> 
    <header class="header"> 
    <img src="http://www.emedicalpoint.com/images/nav/sprite.jpg" alt=""> 
    </header> 
    <div class="content"> 
    <p> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
    </p> 
    </div> 
    <footer> 
    footer content here 
    </footer> 
</div>

CSS -

img { 
    width: 100%; 
} 

.wrapper { 
    bottom: 0; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

header { 
    background: yellow none repeat scroll 0 0; 
    height: 80px; 
    min-height: 80px; 
    width: 100%; 
} 

.content { 
    bottom: 40px; 
    position: fixed; 
    top: 80px; 
    width: 100%; 
} 

footer { 
    background: #414141 none repeat scroll 0 0; 
    bottom: 0; 
    color: #fff; 
    height: 40px; 
    position: fixed; 
    width: 100%; 
}

來源

2016-10-03 moidul dargahi

當試圖有一個響應div時，應該避免給它一個固定的像素高度。試試這個：

img { 
     width: 100%; 
     height: 100%; 
    } 

    header { 
     background: yellow none repeat scroll 0 0; 
     height: 10%; 
     width: 100%; 
    } 

    .content { 
     bottom: 40px; 
     position: fixed; 
     top: 10%; 
     width: 100%; 
    }

現在，我給出的百分比只是爲了說明的目的，你將不得不找到正確的百分比。

來源

2016-10-03 09:29:52 Medard

實際上，@medard如果你看到下面的html，那麼header後面的所有元素都處於固定的位置，例如.-content類是一個固定的位置，你知道我們必須提到一個top：xyz數字。這就是我給高度頭的原因。讓我們假設我刪除了解決我的問題的頭部高度，但是如何將該位置放置在其位置 –

我想說的是我會爲了實現具有固定像素值的響應性而使用diffucult。除非你準備做大量的@media查詢，這不會是prettry。你將不得不使用百分比以及下面的.content div。我已經編輯了我的答案。 – Medard

我明白了你的觀點，但即使我改變我的CSS，並使其成爲百分比，而不是像素。但是，當我設置 ' header img {height}：100％; 寬度：100％; }' 標題圖片變得可調整 –

是的，你可以改變圖像屬性上使用jQuery通過以下方式的窗口大小調整...

$(window).resize(function() { if ($(window).height() < AAA) { $('header img').height(AAA); } });

在上面的代碼中AAA意味着沒有像素。

來源

2016-10-03 09:44:43

它應該是動態的嗎？不是嗎？我的意思是我不能設置任何高度像素 –

以及以處理不同的大小，你需要指定和添加條件在不同的窗口大小設置不同的圖像大小，像下面的方式... ... '$（window）.resize （函數（）{ \t如果（$（窗口）.height（）

不，實際上不可能在代碼中添加不同的圖像，我認爲必須有其他方式。 –

由於最小高度不正確的頭圖像，我們可以通過jQuery或其他方式修復它

回答

相關問題