0

3つのセクションがあるページがあります。各セクションは、ページ全体を表示するセクションです。デスクトップの場合と同様に、記事と背景をモバイルデバイスの画面に収めたいのですが、記事を調整する方法がわかりません。これがフィドルです：http：//jsfiddle.net/kRjUn/

CSSは次のとおりです。

html {
    height: 100%;
    }

body {
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
}

article {
    height: 100%;
    padding-top: 2em;
    }
.wrapper {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: inherit;
    }

.content {
    margin-top: 25em;
    height: inherit;
    }
4

3 に答える 3

1

このグリッドレスボイラープレートを見つけて、本体の高さを 100% に設定すると、うまく機能するように見えました。また、記事の代わりに div を使用しました。クリーンでレスポンシブな定型文を探している人なら誰でも、私は間違いなくそうします。これを試してみてください: https://github.com/thatcoolguy/gridless-boilerplate

于 2012-12-05T16:22:41.157 に答える
0

では、表示テーブルを使用します。

article {
   height: 100%;
   padding-top: 2em;
   display: table;
}
.wrapper.content { 
    padding: 2em; 
    display: table-cell;
}

デモ

于 2014-05-16T02:03:59.323 に答える
0

コードが各デバイスのケースを処理していないと私が感じているのは、CSS 3 メディア クエリ機能を使用する必要があるためです。

例としてHTML5 ボイラープレートテンプレートを使用できると思います。

于 2012-12-05T16:05:00.040 に答える