0

我有一个 div，我试图按百分比定位它以使其保持原位（它有点浮动，不以页面的空白部分为中心），同时仍然使其可访问并且在不同的屏幕尺寸下看起来不错而不是真的偏向一边。

问题是，虽然我可以使用 left: x% 来相应地调整它，但除非我指定像素而不是百分比，否则尝试使用 top 不会做任何事情。如果我尝试以任何方式更改底部，它会将我试图定位的 div 锁定在我的标题附近，并使用 px 更改底部使其从标题区域上升到屏幕上。

绝对定位 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 中一样，不是布局所必需的，但这是解决问题的尝试。）

在这件事上的任何帮助将不胜感激。对所有代码感到抱歉，但我觉得页脚位是必要的，仅仅是因为上述滚动问题。

4

1 回答 1

0

取出

height: auto !important;

在#容器中。

这使您可以将 % 用于顶部或底部。

于 2015-01-28T21:02:03.437 回答