私はおそらく何か基本的なことを忘れています。絶対配置されたdivはボディの下まで完全に伸びません
私が達成しようとしているのは、背景がぼやけていることです。ナビゲーションを見つけることはできますが、すぐには表示されず、ナビゲーションアイコンをクリックすると表示され、背景をぼかして全体のビューポートを撮影します。この部分は大丈夫です。ページ内のすべての関連コンテンツは、簡単な連絡先フォームです。私は<div id="in-blur"></div>の中にフォームを置くことはできませんまたはそれも同様にぼやけているだろう、したがって、それは任意のコンテンツを持っていない、ちょうど（ぼやけて）背景画像を保持しています。私がposition: absoluteを設定し、#in-blurのためにwidth: 100%;とheight: 100%を設定しなければならなかったフォームの後ろにそれを配置するためには内容がありません。問題：私が理解しているように、<body>は<main>（連絡先はどこですか）からの高さを受け取り、#in-blurの高さは100％（ボディの）に設定されていますが、実際の要素はビューポートまでしかありません。例：ページを横向きにして、ビューポートの高さが320px（iPhone 5Sなど）である場合、背景画像、つまり＃in-blurは320pxで終わり、必要なフォームの一部を残します背景画像なしでスクロールします。高さを100％以上にすると、背景が空きスペースをいっぱいにして最後まで増えますが、含める要素の高さを既に含めると、高さが<body>、<body>であることを考慮していませんページ全体をカバーしています。私は絶対配置された要素について何かを忘れてしまったでしょうか？
私は、次のようなHTMLがあります関連の問題のために、このCSSで
<body>
<div id="main-nav">
<div id="menu-close">
<div id="menu-close-1"></div>
<div id="menu-close-2"></div>
</div>
<nav role="navigation">
<ul>
<li><a href="index.html">главная</a></li>
<li><a href="#">Обо мне</a></li>
<li><a href="#">Метод</a></li>
<li><a href="contact.html">Контакты</a></li> <!-- Replace with the PHP version accordingly -->
</ul>
</nav>
<div id="menu-wrapper">
<div id="menu-icon-1"></div>
<div id="menu-icon-2"></div>
<div id="menu-icon-3"></div>
</div>
<main class="margin-normal" id="contact-form">
<section id="unique">
<h1>контакты</h1>
<form action="#" name="form" autocomplete="on" method="post"> <!-- Check out PHP details and include the necessary info -->
<fieldset>
<label for="name">Имя<em>*</em></label>
<input type="text" name="name" id="name" maxlength="45" aria-required>
<label for="email">E-mail<em>*</em></label>
<input type="email" name="email" id="email">
<label for="subject">Тема<em>*</em></label>
<input type="text" name="subject" id="subject" aria-required>
<label for="message">Сообщение<em>*</em></label>
<textarea name="message" id="message" aria-required></textarea>
<input type="submit" value="Отправить">
</fieldset>
</form>
</section>
</main>
</div>
<div id="in-blur"></div>
</body>
を：
#in-blur
{
background: url(../img/main_background.jpg) 50% 50%/cover no-repeat;
width: 100%;
height: 100%;
filter: blur(7px);
position: absolute;
top: 0;
z-index: -1;
}
'位置にこれを追加します。最初の問題を解決しfixed'をしてでデバッグするときに、すべてがしかし、働くブラウザのみデスクトップの応答のdevのツールに実装をチェックしますブラウザのナビゲーションバーがスクロール中に表示されたり隠れたりしたときに発生するサイズ変更のために、背景画像が伸びていたために以前は静的だった白いトレイルが1秒間表示され、背景を覆うようにサイズが変更されます。奇妙な効果。私はまだチェックしている。 –