jquery - 调整大小时弹出警报离开屏幕

Question

我有一个弹出框，当用户将鼠标移到图标上时会显示该弹出框。悬停的 css 如下:-

.profile-bubble {
background-color: #EDEDED;
border: 2px solid #666666;
font-size: 15px;
font-weight: bold;
line-height: 1.3em;
margin: 0.6% 2% 2% 90%;
padding: 10px;
position: absolute;
text-align: center;
width: 150px;
opacity: 0.9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 0 5px #888888;
-webkit-box-shadow: 0 0 5px #888888;

这工作正常，但问题是当我调整屏幕大小时，或者如果用户的分辨率比我的分辨率小，则警告框会离开屏幕。

如何修改此 css 以使其与屏幕大小成比例？

感谢您的帮助和时间。

更新-------------------------------------------- ---------- 这是标题 css:-

/* Header*/

标题{ 填充底部:5px；

#headerContainer {
height: 33px;
background-position: 10px 2px;
padding-top: 2px;

.headerProfileNotifications {
float: right;
padding-right: 4px;
margin: 3px;
position: relative;

.headerProfilePhoto {
float: right;
position: relative;
margin: 3px;

img {
border: 1px solid #D5D5D5;    

img {
border: 1px solid #D5D5D5;    

img:hover {
border: 2px solid #000000;    

.headerProfileDetails {
float: right;
padding-right: 4px;
font-size: 11px;
text-align: right;

.headerProfileName {
margin-top: 2px;

.headerProfileEmail {
clear:both;
float:right;
margin-top: 0px;

和 html:-

<header>
        <div class="content-wrapper">
            <div id="headerContainer">
                <div class="headerProfileNotifications">
                        <img src="Images/" alt="notification" />
                </div>
                <div class="headerProfilePhoto">
                        <img src="Images/" alt="profile_photo" />
                </div>
                <div class="headerProfileDetails">
                    <div class="headerProfileName">
                            John Smith
                    </div>
                    <div class="headerProfileEmail">
                            john.smith@somemail.co.uk
                    </div>

                </div>
            </div>
         </div>
    </header>

Answer 1

宽度和高度也是百分比 -

width:50%;
height:50%;

然后将 box-sizing 调整为 border-box 这样你就不必考虑边距、填充等。这一切都只涉及宽度。

然后相应地定位它(你有 position:absolute)-

top:20%;
left:20%;

您的图片和气泡必须位于容器内，且容器内没有其他元素。
看这个example on codepen.
这个容器必须相对定位。