Место под формой. Как убрать?

Question

[IlyaOrlov96]

Добрый день. У меня проблема с формой обратной связи - под ней очень большой пропуск.
Вот код формы

<div class="form">
<form enctype="multipart/form-data" method="post" id="feedback-form">
<div class="fon">
<img src="../img/form/bg.png" alt="bg" width="100%">
</div>
<span class="forma">
<span class="name">
<label for="nameFF">Имя:</label>
<br>
<input type="text" name="nameFF" id="nameFF" x-autocompletetype="name" class="w100 border">
</span>
<span class="company">
<label for="company">Название компании</label>
<br>
<input type="text" name="nameFF_1" id="nameFF_1" x-autocompletetype="companyname" class="w100 border">
</span>
<br>
<span class="mail">
<label for="contactFF">Email:</label>
<br>
<input type="email" name="contactFF" id="contactFF" x-autocompletetype="email" class="w100 border">
</span>
<span class="tel">
<label for="tel">Телефон:</label>
<br>
<input type="tel" name="tel" id="tel" x-autocompletetype="tel" class="w100 border">
</span>
<br>
<span class="file">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
</span>
<br>
<span class="text">
<label for="messageFF">Сообщение:</label>
<br>
<textarea name="messageFF" id="messageFF" required rows="5" class="w100 border"></textarea>
</span>
<br>
<span class="send">
<input value="Отправить" type="submit" id="submitFF">
</span>
</span> 
</form>
</div>
вот css
.form {
position: absolute;
top: 480%;
padding: 0;
z-index: 100;
}
.name {
position: absolute;
top: 10%;
left: 25%;
font-family: Lato-Light;
color: #fff;
}
#nameFF {
border-radius: 20px;
width: 200px;
padding: 10px;
border-style: solid;
background-color: #6687ff; /*цвет фона*/
border-color: #fff; /*цвет рамки*/
color: #fff;
}
.company {
position: absolute;
top: 10%;
left: 54%;
font-family: Lato-Light;
color: #fff;
}
#nameFF_1 {
border-radius: 20px;
width: 200px;
padding: 10px;
border-style: solid;
background-color: #6687ff; /*цвет фона*/
border-color: #fff; /*цвет рамки*/
color: #fff;
}
.mail {
position: absolute;
top: 23%;
left: 25%;
font-family: Lato-Light;
color: #fff;
}
#contactFF {
border-radius: 20px;
width: 200px;
border-style: solid;
padding: 10px;
background-color: #6687ff; /*цвет фона*/
border-color: #fff; /*цвет рамки*/
color: #fff;
}
.tel {
position: absolute;
top: 23%;
left: 54%;
font-family: Lato-Light;
color: #fff;
}
#tel {
border-radius: 20px;
width: 200px;
padding: 10px;
border-style: solid;
background-color: #6687ff; /*цвет фона*/
border-color: #fff; /*цвет рамки*/
color: #fff;
}
.file {
position: absolute;
top: 36%;
left: 25%;
width: 49%;
height: 40px;
border-radius: 100px;
font-family: Lato-Light;
color: #fff;
}
#fileFF {
border-radius: 50px;
border-width: 2px;
border-style: solid;
width: 575px;
font-family: Lato-Light;
background-color: #6687ff;}
.text {
position: absolute;
top: 49%;
left: 25%;
font-family: Lato-Light;
color: #fff;
}
#messageFF {
border-radius: 50px;
border-width: 2px;
border-style: solid;
width: 557px;
height: 150px;
background-color: #6687ff; /*цвет фона*/
border-color: #fff; /*цвет рамки*/
padding: 3%;
color: #fff;
}
.send {
position: absolute;
top: 83%;
left: 25%;
}

Comments

[Dima Polos]

Есть девтулз в браузере, смотрите там, что сверху у этого блока, что снизу, какие свойства применяются, пробуйте отключать свойства, включать и так далее, в результате все найдется и можно поправить.

Answer 1

[Павел]

Под ней или над ней?

.form {
position: absolute;
top: 480%; - тут ошибка, это очень много...
padding: 0;
z-index: 100;
}

Comments

[IlyaOrlov96]

Под формой остается много места пустого.
У меня очень длинная станица, как опустить элемент вниз тогда, если не через "top"?

[Павел]

IlyaOrlov96, без demo врятле будет понятно почему много места пустого.

[IlyaOrlov96]

Павел, я могу вам на почту написать?

[Степан Крапивин]

IlyaOrlov96, может вы просто оформите свой код на jsfiddle или codepen? Все будет проще понять что у вас там случилось