缩放时不需要的空间（div标签）

Question

我的页面右下角有一个div背景图片。问题是，当我缩小时，它与页面的右下角之间会出现一个小空间。我不确定为什么会这样做。

我对此仍然有点新意，但是你能给予任何帮助，我真的很感激。

下面的图片显示了我缩放时的更改以及相关的html / css

这是我的HTML

<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | <a href="index.html">NEWSLETTER</a> | <a href="index.html">FACEBOOK</a>
<span class="right">DESIGN: PROMISE LAND PARTNERS</span>
</p>
</div>


<a href="index.html">
<div id="portfolio"></div>
</a>

</body>

这是CSS

#portfolio {
    background-image:  url(img/portfoliopanel.png);
    background-repeat: no-repeat;
    height: 117px;
    width: 198px;
    position: absolute;
    bottom: 27px;
    right: 0%;
    margin: 0;
    padding: 0;
}

#portfolio:hover {
    background-image: url(img/portfolio_pushed.png);
}

Answer 1

我认为这种方式对你有用，在这里我提到.nauture_image类DIV是自然图像背景div，你只需使用#portfolio Div lyk的父母：

HTML

<div class="nature_image">
     <a href="index.html">
          <div id="portfolio"></div>
    </a>
</div>


<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | <a href="index.html">NEWSLETTER</a> | <a href="index.html">FACEBOOK</a>
<span class="right">DESIGN: PROMISE LAND PARTNERS</span>
</p>
</div>

</body>

然后使用下面的css lyk，你应该给位置：relative并提到父div的特定高度（.nature_image div），然后给出postion：absolute和bottom：0;为孩子#portfolio ID div

CSS：

.nature_image{ 
    background-image:  url(img/nauture_image_bg.png);
    background-repeat: no-repeat;
    height: 480pxpx;
    width: 100%px;
    position: relative;
    left:0;
    top: 0;
    margin: 0;
    padding: 0;
}

#portfolio {
    background-image:  url(img/portfoliopanel.png);
    background-repeat: no-repeat;
    height: 117px;
    width: 198px;
    position: absolute;
    bottom: 0px;
    right: 0%;
    margin: 0;
    padding: 0;
}

我相信这对你有用，

由于

Senthil