如何設置DIV頁面

我想在頁面的底部設置此橫幅廣告結束時，我怎樣才能讓圖像只是把它在旗幟位置DIV不要超過上述股利。如何設置DIV頁面

.banner { 
 
    width: 100%; 
 
} 
 

 
.banner img { 
 
    width: 100%; 
 
    max-height: 140px; 
 
    z-index: 99999999999; 
 
    position: fixed; 
 
    bottom: 0; 
 
}

 <div class="banner"> 
 
      <img src="http://machahid.info/wp-content/uploads/2016/12/pubmobile.gif" alt="ads"> 
 
     </div>

圖像描述的問題：

謝謝你們。

來源

2017-01-19 Wael Assaf

可能，這可以幫助你。 http://stackoverflow.com/questions/19760770/contain-an-image-whose-size-is-dynamic-inside-a-div – Piyush

，您可以給容器元素（身體或DIV等）的填充，底部或取決於你如何已經設置文檔的140px邊距。這將始終允許您的廣告在頁面末尾留出空間。

來源

2017-01-19 01:18:26 PavKR

與我的作品..感謝的人。 –

簡單的解決方案;請勿使用position: fixed作爲必須包含在其父代中的元素。你需要做的是應用position: fixed和bottom: 0到.banner代替：

.banner { 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 

.banner img { 
    width: 100%; 
    max-height: 140px; 
    z-index: 99999999999; 
}

這將使固定在底部全旗幟，以圖像不會逃避我創建了界限:)

一個小提琴展示here。

希望這會有所幫助！

來源

2017-01-19 01:13:36

謝謝回覆..但我需要它固定的滾動它是一個廣告。 –

我已經編輯回答使橫幅固定。這將使整個DIV固定在屏幕的底部，與圖像佔據div的寬度的100％ - 並且應該預期的行爲;） –

你可能想避免使用position: fixed因爲它是已知造成在移動設備上的性能問題，尤其是當有任何形式的參與轉換或翻譯。

我在這種情況下的常用方法是使用絕對或有時相對定位的元素，然後動態調整需要適合calc()的周圍元素的尺寸。這適用於所有設備，並且不會導致性能損失。 calc()也是extremely well supported。

HTML

<div class="wrapper"> 
    <div class="content"> 
    <h1>Heading!</h1> 
    <p>...</p> 
    <h1>Another heading!</h1> 
    <p>...</p> 
    <h1>Yey! Another heading!</h1> 
    <p>...</p> 
    </div> 
    <div class="banner"> 
    <img src="https://placehold.it/600x120" alt="ads" /> 
    </div> 
</div>

CSS

body { 
    margin: 0; 
} 

.wrapper { 
    background: #981e32; 
    width: 600px; 
    height: calc(100vh - 120px); /* viewport height - fixed banner height */ 
    overflow-y: auto; /* makes sure there are scrollbars when needed */ 
} 

.banner { 
    position: absolute; 
    bottom: 0; 
    max-height: 120px; 
} 

.content { 
    padding: 1em; 
    color: white; 
} 

.banner img { 
    display: block; /* this prevents inline elements from messing up height calculations */ 
}

只是裸記住，我做了示範着想一些假設。您可以自由調整代碼以適應您的需求。

DEMO

來源

2017-01-19 02:12:54 brezanac

如何設置DIV頁面

回答

相關問題