Html 调整窗口大小并使div保持在同一位置

嗯。。我的英语不好，所以我想画什么就画什么

全文：

绿色容器是我的内容包装。黑色和红色的方块是访问其他页面的按钮

因此，当我调整页面大小时，我希望保留这些按钮的形状，如下图所示：

1024px窗口视图：

这是我的初始HTML：

<div id="wrap_home_bts">
    <div class="bt_woman"></div>
    <div class="bt_man"></div>
</div>

但通过这种方式，“按钮”伴随着调整大小的窗口

---

我清除？

不是使用左和右0px定位块，而是将它们定位到50%，然后使用负边距按您想要的方式对齐。这应该是可行的，尽管您必须调整边距以完全符合您的需要：

#wrap_home_bts{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

}

.bt_woman{
    width:880px;
    height:389px;
    background:#FFCC00;
    display: block;
    position:absolute;
    left:50%;
    margin-left: -650px;
    bottom:245px;

}

.bt_man{
    width:733px;
    height:168px;
    background:#CC00FF;

    position:absolute;
    display: block;
    left:50%;
    margin-right: -650px;
    bottom:74px;

}

---

.bt_女性和.bt_男性绝对位于宽度设置为100%的#wrap_home_bts中。这样#wrap_home_bts大小将随着浏览器大小的变化而变化，.bt_woman和.bt_man的位置将遵循此元素。也许，让.bt#u女人和.bt#u男人在“包裹之家”bts之外会更好。然后，您可以使用javaScript为body元素设置一些宽度，比如屏幕的宽度。这样他们就永远不会改变调整大小的位置。

看看媒体查询：css-tricks.com/css-media-querys你有没有试过用%而不是px来设置bt_-woman和bt_-man的宽度？@WillemVanBockstal用%来设置宽度不会带来任何结果。@RehanMehdi你有什么具体问题吗？

#wrap_home_bts{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

}

.bt_woman{
    width:880px;
    height:389px;
    background:#FFCC00;
    display: block;
    position:absolute;
    left:50%;
    margin-left: -650px;
    bottom:245px;

}

.bt_man{
    width:733px;
    height:168px;
    background:#CC00FF;

    position:absolute;
    display: block;
    left:50%;
    margin-right: -650px;
    bottom:74px;

}