我很可能忘记了一些基本的东西，但无论如何。
我想要实现的是模糊背景。虽然你会找到一个导航，但它不会立即可见，并且会在单击占据整个视口(viewport)的导航图标同时模糊背景时显示。这部分没问题。页面中的所有相关内容都是一个简单的联系表。我无法将表格放入 <div id="in-blur"></div>或者它也会被模糊，因此它没有任何内容，只是包含背景图像(被模糊)本身。为了将它放在表格后面，我必须设置 position: absolute并建立width: 100%;和 height: 100%对于 #in-blur因为里面没有内容。问题:据我了解，<body>从 <main> 获取它的高度(联系表格所在的位置)虽然高度为 #in-blur设置为 100%(主体)，实际元素仅到达视口(viewport)。例如:如果我横向检查页面并且视口(viewport)高 320 像素(例如，作为 iPhone 5S)，背景图像，即 #in-blur，在 320 像素处结束，留下需要的部分表单在没有背景图像的情况下滚动。如果我将高度增加到 100% 以上，背景会增加以填充空白空间，直到最后，但我想我不应该这样做，因为我已经将高度设置为包含元素的 100%，<body> , 和 <body>本身覆盖整个页面。我是否忘记了关于绝对定位元素的任何特别之处？
我有以下 HTML:
<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>
使用此 CSS 解决相关问题:
#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;
}
最佳答案
查看 #in-blur 上的 position:fixed 是否解决了您的问题
关于html - 绝对定位的 div 不会一直延伸到 body 下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41088506/