Question

我有一个div，我试图按百分比定位，以便它保持原位（它有点漂浮在页面的空白部分不居中），同时仍然使它可以访问并且看起来很好不同的屏幕尺寸并没有真正偏向一边。

问题在于，虽然我可以使用left：x％来相应地调整它，但尝试使用top不会做任何事情，除非我指定像素，而不是百分比。如果我尝试以任何的方式改变底部，它会锁定我想要在我的标题附近定位的div，并用px改变底部使它从标题区域向上移动。< / p>

绝对定位content_wrapper实际上使得top属性工作得很好，但是它会在我的页脚下面推出一堆空间并添加一个滚动条，几乎毁掉了页脚之外的设计。

这是HTML：

<body>

<div id="container">

<div id="content_wrapper">

    <div id="header">

    </div>
    <div id="content">
        <div class="marquee">

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

<div id="footer_wrapper">
    <div id="footer">

    </div>
</div>

</body>

这是CSS：

html, body {
    height: 100%;
}

#content {
    height: 100%;
    position: relative;
    width: 100%;
    float: left;
}

body {
    margin: 0;
    padding: 0;
    color: #FFF;
    /* background: image.jpg; */
    background-size: cover;
}

.marquee {
    position: absolute;
    height: auto;
    padding: 10px 5px;
    background-color: #F8F8F8;
    width: 30em;
    left: 15%;
}

#footer_wrapper {
    width: 100%;
    height: 43px;
}

#container {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -43px 0px;

}

#content_wrapper {
    width: 100%;
    margin: 0px 0px -41px 0px;
    padding-top: 40px;
    height: 100%;
}

#footer {
    position: relative;
    z-index: 10;
    height: 4em;
    margin-top: -4.07em;
    background-color: #FFF;
    clear: both;
    background-color: #2A64A7;
    border-top: 2px solid #F8F8F8;
}

（那里有一个或两个浮点数，就像在#content中一样，布局不需要，但试图解决这个问题。）

对此事的任何帮助都将非常感激。对于所有代码感到抱歉，但我觉得页脚位是必要的，因为前面提到的滚动问题。

Answer 1

取出

height: auto !important;

<＃>在#container中。

这可以让你使用％作为顶部或底部。

Top属性不使用％，但与px一起使用

1 个答案: