2

モバイルSafari（iPhoneおよびiPad）で、ページ要素がビューポートの高さの100％を占めるようにするのに問題があります。100％の高さに設定されたページ要素を含む要素があり（HTMLとBodyが100％の高さに設定されています）、これはビューポートの高さの100％を満たします。

問題は、コンテナの3つの子要素（.main-header：10％、. main-content：80％、および.main-footer：10％）で、合計で100％の高さになりますが、まだ小さい（約2px） ）親（.page）要素の背景を確認できるページ下部のギャップ。

他の誰かがこの問題を経験して修正したことがあれば、私はどんな助けにも非常に感謝するでしょう。

ありがとう！

このフィドルで私の簡略化されたHTML/CSSを見ることができます：http： //jsfiddle.net/Rockstar79/zpTtF/

メタタグなどを含む完全なコードは次のとおりです。

CSS

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,
p {
    font-size: 100%;
    margin: 0;
    padding: 0;
}

.page {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.main-header {
    width: 100%;
    height: 10%;
    position: relative;
}

.main-content {
    width: 100%;
    height: 80%;
    position: relative;
    background-color: yellow;
}

.main-footer {
    width: 100%;
    height: 10%;
    position: relative;
}

.main-header,
.main-footer {
    background-color: blue;
}

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Plain Mobile Test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
    <div class="page" id="page-1">
        <div class="main-header">
            <h1>Header</h1>
        </div>
        <div class="main-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sunt aut libero sequi distinctio molestias nulla quidem fugiat. Maxime voluptates.
            </p>
        </div>
        <div class="main-footer">
            <h3>Footer</h3>
        </div>
    </div>
</body>
</html>
4

0 に答える 0