固定的div到其他的div改变窗口大小

Question

问题时是，语音泡沫只迷恋于标签的浏览器的一定宽度：

见here尝试自己。

相关代码

<ion-tabs class="tabs-icon-top tabs-positive"> 
    <div class="bubble-bar-tabs"> 
    <div class="b-home"></div> 
    <div class="b-about"></div> 
    <div class="b-cont"></div> 
    </div> 
    <ion-tab title="Home" icon="ion-home" href="#/tab/home"> 
    <ion-nav-view name="home-tab"></ion-nav-view> 
    </ion-tab> 
    <ion-tab>... 
    <ion-tab>... 
</ion-tabs> 

与

.bubble-bar-tabs { 
    position: absolute; 
} 

.b-home { 
    display: block; 
    line-height: normal; 
    z-index: 1000; 
    position: absolute; 
    left: 3rem; 
    top: -75px; 
    width: 219px; 
    height: 70px; 
} 

如何修复的讲话对准泡到标签的所有浏览器窗口大小/屏幕尺寸？谢谢。

Answer 1

您应该尝试在宽度和高度值而不是像素上使用百分比，因为百分比值取决于屏幕大小和包含它的元素。因此，对于你的CSS代码，我建议应该是这样的：

.b-home { 
display: block; 
line-height: normal; 
z-index: 1000; 
position: absolute; 
left: 3rem; 
top: -75px; 
width: 33%; 
height: 70px; 
} 

宽度百分比值将使您能够使气泡保持在一定的屏幕尺寸。另外我会建议做一个边缘，泡沫不会互相干扰。

对于移动设备，您需要实施@media screen以启用移动设备的自定义CSS。一个这样的例子是：

@media screen and (max-width: 600px) { 
.aClassforSmallScreens { 
     clear: both; 
    font-size: 1.3em; 
} 
} 

Answer 2

您的问题是基于您的HTML结构。

每个<div class="b-home"></div>应该是<ion-tab title=...元素的儿子。

然后用

.b-home { 
    display: block; 
    line-height: normal; 
    z-index: 1000; 
    position: absolute; 
    left: 50%; // here you specify that the start of the bubble is 50% from left, adapt it to your need 
    **top: -5px;** // Here, you specify that your content is 5 pexel HIGHER than the top 
    width: 219px; 
    height: 70px; 
} 

而且改变你的CSS，关于宽度和高度，有一个固定宽度的高度将解决的内容重叠的其他内容时，页面改变大小。更好地使用％来增加页面高度的宽度。