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 のように 1 つまたは 2 つのフロートがありますが、これは問題を修正するための試みです。)

この問題の助けをいただければ幸いです。すべてのコードについて申し訳ありませんが、前述のスクロールに関する問題のためにフッター ビットが必要なように感じます。

4

1 に答える 1

0

を取り出す

height: auto !important;

#コンテナに。

これにより、上または下に % を使用できます。

于 2015-01-28T21:02:03.437 に答える