Пустое пространство в конце

@ruffury · Регистрация: 23.01.2017

Студворк — интернет-сервис помощи студентам

Всем привет, проблема: есть хедер и внутри 2 блока, высота 7 и 93 процента, но в самом низу появляется пустое пространство, которое не видит инспектор. Подключены плагины slick и font-awesome.
вот код html.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<header>
            <div class="my-header">
                <div class="logo">
                    <img src="../img/logocopy.png" alt="logo">
                    <div class="text"><span class="textLogo"><a href="">The bike shop</a></span></div>
                </div>
                <ul class="menu">
                    <li class="active"><a href="" class="activeLink">Bicycles</a>
                        <ul class="pd-menu">
                            <li><a href="#">Fixed/single speed</a></li>
                            <li><a href="#">City bikes</a></li>
                            <li><a href="#">Premium series</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Parts</a></li>
                    <li><a href="#">Accessories</a></li>
                    <li><a href="#">Extras</a></li>
                </ul>
            </div>
            <div class="sl">
                <div class="slide first-slide">
                    <h1 class="title-big">Handmade bicycle</h1>
                    <h2 class="title-small">You <span class="title-small-yellow">create</span> the <span class="title-small-yellow">journey</span>, we supply the <span class="title-small-yellow">parts</span>.</h2>
                    <a href="#" class="button-header"><span>Shop bikes</span></a>
                </div>
                <div class="slide second-slide">
                    <h1 class="title-big">RUFFURY bicycle</h1>
                    <h2 class="title-small">We <span class="title-small-yellow">have</span> the <span class="title-small-yellow">journey</span>, we create the <span class="title-small-yellow">cars</span>.</h2>
                    <a href="#" class="button-header"><span>Shop bikes</span></a>
                </div>
                <div class="slide third-slide">
                    <h1 class="title-big">You are the bitch</h1>
                    <h2 class="title-small">Motherfucka <span class="title-small-yellow">suck</span> my <span class="title-small-yellow">****</span>, son of the<span class="title-small-yellow">bitch</span>.</h2>
                    <a href="#" class="button-header"><span>create sex</span></a>
                </div>
                <div class="slide fourth-slide">
                    <h1 class="title-big">Suck my ****</h1>
                    <h2 class="title-small">i can <span class="title-small-yellow">die</span> your <span class="title-small-yellow">family</span>,because <span class="title-small-yellow">you are shit</span>.</h2>
                    <a href="#" class="button-header"><span>please die</span></a>
                </div>
            </div>
 
        </header>

sass:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
html, body
    height: 100%
 
body
    font-size: 16px
    min-width: 320px
    position: relative
    line-height: 1.75
    font-family: $default-font
    overflow-x: hidden
    opacity: 1
 
header
    background-image: url(../img/Slider_Photo01.png)
    background-blend-mode: multiply
    background-color: rgba(54, 8, 8, 0.49)
    background-size: cover 
    min-height: 700px
    height: 100vh
    min-width: 100%
 
.my-header
    display: flex
    justify-content: space-between
    align-items: flex-end
    height: 7%
    max-width: 57%
    margin: 0 auto
    img
        width: 25px
        height: 16px
        display: block
        margin: 0 auto
    .text
        text-align: center
 
.textLogo
    display: block
    padding: 1px
    background-color: white
    border-radius: 7px
    letter-spacing: .11em
    font-family: $second-bold
    font-size: 14px
    text-transform: uppercase
    a
        text-decoration: none
        color: inherit
 
a
    font-size: 15px
    text-transform: uppercase
    text-decoration: none
    display: block
    &:hover
        text-decoration: none
 
 
.menu /*основное меню*/
    list-style: none
    margin: 0
    padding: 0
    li
        list-style: none
        display: inline-block
        a
            padding: 3px 9px 
            font-family: $default-font
            color: #fff
            &:hover
                background-color: $accent
                border-radius: 7px
                color: #000
.pd-menu  /*выпадающее меню*/
    display: none
    background-color: $accent
    width: 200px
    position: absolute
    border-radius: 0 7px 7px 7px
    padding: 0
    z-index: 100
    li > a
        color: black
        &:hover
            color: white
 
 
.sl /*слайдер*/
    width: 100%
    height: 93%
    display: flex
    align-items: center
    margin: 0 !important
    box-sizing: border-box
    .slide
        height: 100%
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        &:focus
            outline: none
.slick-prev
    left: 0
    z-index: 10
.slick-next
    right: 0
    z-index: 10
 
.arrow-button /*кнопки слайдепа*/
    position: absolute
    width: 50px
    height: 50px
    border: 2px solid #fff
    border-radius: 6px
    background-color: transparent
    padding: 0
    &:focus
            outline: none
    &:after
        color: white
        font-size: 130%
        font-family: Fontawesome
.nextArrow-button
    right: 20px
    &:after
        content: '\f054'
.prevArrow-button
    left: 20px
    z-index: 100
    &:after
        content: '\f053'
 
 
.dots-slide
    position: absolute
    bottom: 0
    line-height: 0
    display: block
    width: 100%
    padding: 0
    margin: 0
    list-style: none
    text-align: center
    box-sizing: border-box
    li
        position: relative
        display: inline-block
        width: 25%
        margin: 0
        cursor: pointer
        opacity: 0
        transition: 0.5s linear
        &.slick-active
            opacity: 1
            color: black
        button
            display: block
            width: 100%
            cursor: pointer
            color: transparent
            border: 0
            outline: none
            background: $accent
 
.title-big /*стили для контента слайдера*/
    text-transform: uppercase
    font-size: 50px
    font-family: $default-font
    line-height: 100%
.title-small
    color: #fff
    font-size: 24px
    font-family: $second-bold
    margin: 10px 0
    line-height: 100%
    .title-small-yellow
        color: $accent
.button-header
    background-color: #000
    width: 120px
    height: 40px
    border-radius: 10px
    text-decoration: none
    text-transform: uppercase
    color: $accent
    margin-top: 30px
    &:hover
        color: #fff
    &:focus
        outline: none
        color: #fff
        text-decoration: none
    span
        display: block
        margin: calc((40px - 21px) / 2) auto
        font-size: 12px
        width: 70px
 
 
.title-big
    color: #fff
    font-size: 50px
    margin: 0
 
.activeLink:hover
    border-radius: 7px 7px 0 0 !important
 
.header-title
    width: 70%
    margin: 0 auto

js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(document).ready(function(){
        $(".active").hover(
        function() { $('.pd-menu', this).fadeIn("fast");
        },
        function() { $('.pd-menu', this).fadeOut("fast");
     });
        $( ".pd-menu" )
          .on( "mouseenter", function() {
            $(".active").css({
              "background-color": "#fcff19",
              "border-radius": "7px 7px 0 0"
            });
          })
          .on( "mouseleave", function() {
            var stylesMenu = {
              backgroundColor : "transparent"
            };
            $(".active").css(stylesMenu);
  });
          
  $('.sl').slick({
    dots: true,
    dotsClass: 'dots-slide',
    arrows: true,
    nextArrow: '<button class="arrow-button nextArrow-button"></button>',
    prevArrow: '<button class="arrow-button prevArrow-button"></button>'
  });
});

@anzarsh · 22.05.2017, 10:04

JavaScript
1
2
3
4
5
6
7
$('.sl').slick({
    dots: true,
    dotsClass: 'dots-slide',
    arrows: true,
    nextArrow: '<button class="arrow-button nextArrow-button"></button>',
    prevArrow: '<button class="arrow-button prevArrow-button"></button>'
  });

- скорее всего из-за этого или меняется структура документа, или перебиваются стили, попробуйте сделать обертку и ей задать height: 93%;

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .