如何设置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页面

回答

相关问题