Как задать высоту под разрешения экрана?

Question

Валентин Попов @elarkov

Как задать высоту под разрешения экрана?

Весь контент обернут в container-fluid, но почему то на разных разрешениях экрана не занимает всю высоту окна браузера. С чем это может быть связано?

Вопрос задан более трёх лет назад
1600 просмотров

1 комментарий

Подписаться 1 Оценить 1 комментарий

Валентин Попов @elarkov Автор вопроса

Efimenko-Bohdan-почему то не выходит: вот код

<body>

<div class="container-fluid main-bg">

  <div class="row row-left">
               <div class="col-md-4 col-lg-4 col-left">
                   <div class="block-left">
                    <h1 class="row-lef-header">Печать фото из <span>Instagram</span></h1>
                    <p class="row-lef-header">г. Чайковский</p>
                    <p class="row-left-phone">+7(922)32-55-725</p>
                    </div>
                    <div class="row-left-img">
                        <img src="img/logo.png" alt="Логотип">
                    </div>
                </div>
                <div class="col-md-8 col-lg-8 row-right">
                    <div class="block-right">
                        <h3 class="block-right-header">Закажи сейчас!</h3>
                        <p class="block-right-text">оплати после получения!</p>
                        <form id="my-form" class="form-horizontal">

                            <fieldset>
                               <div class="top-form">
                                <!-- Hidden Required Fields -->
                           <input type="hidden" name="project_name" value="Test.ru">
                           <input type="hidden" name="admin_email" value="test@test.ru">
                           <input type="hidden" name="form_subject" value="Новая заявка с сайта">
                                <span>
                                   <label>Ваше имя</label><br/>
                                    <input  type="text"  placeholder="Иван Иванов" name="имя"><br/>
                                    </span>
                                <span class="telephone">
                                    <label>Телефон</label><br/>
                                    <input type="tel"  placeholder="89223255725" name="телефон">
                                </span>
                                <span>
                                    <label>Количество фото</label><br/>
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active">
                                        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">4 шт. - 100 руб.</a>
                                        </li>
                                        <li>/</li>
                                        <li role="presentation">
                                        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">8 шт. - 190 руб.</a></li>
                                    </ul>
                                </span>
                                </div>
                              <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <span class="telephone">
                                        <label for="name">Ссылки на фото</label><br/>
                                       <strong>1</strong> <input class="name" type="url"  placeholder="https://www.instagram.com/p/BLbVRHxjs" name="cсылка_первая"><br/>
                                    </span>
                                    <span class="telephone">
                                    <label>&nbsp;</label><br/>
                                        <strong>2</strong><input class="name" type="url" name="ссылка_вторая" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                    </span>
                                    <span class="telephone">
                                    <label>&nbsp;</label><br/>
                                        <strong>3</strong><input class="name" type="url" name="cсылка_третья" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                    </span>
                                    <span class="telephone">
                                    <label>&nbsp;</label><br/>
                                        <strong>4</strong><input class="name" type="url" name="cсылка_четвертая" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                    </span>
                                </div>
                            <div role="tabpanel" class="tab-pane" id="profile">
                                <span class="telephone">
                                    <label for="name">Ссылки на фото</label><br/>
                                    <strong>1</strong><input class="name" type="url" name="cсылка1" placeholder="https://www.instagram.com/p/BLbVRHxjs"><br/>
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>2</strong><input class="name" type="url" name="cсылка2" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>3</strong><input class="name" type="url" name="cсылка3" placeholder="https://www.instagram.com/p/BLbVRHxjs"><br/>
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>4</strong><input class="name" type="url" name="cсылка4" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>5</strong><input class="name" type="url" name="cсылка5" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>6</strong><input class="name" type="url" name="cсылка6" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>7</strong><input class="name" type="url" name="cсылка7" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                </span>
                                <span class="telephone">
                                   <label>&nbsp;</label><br/>
                                    <strong>8</strong><input class="name" type="url" name="cсылка8" placeholder="https://www.instagram.com/p/BLbVRHxjs">
                                </span>
                            </div>

                            </div>

                            </fieldset>
                            <p class="important"><b>ВАЖНО!</b>Аккаунты, фотографии которых указываются, должны быть в открытом доступе!</p>
                            <button class="btn">#заказать</button>
                            <div class="message js-message"></div>
                        </form>

                    </div>
                    <div class="block-footer">
                        <div class="col-lg-4 footer-item">
                            <h3 class="footer-header">Когда можно
                            получить фото?</h3>
                            <p><span>- 18:00 - 22:00</span><br/>
                            (ежедневно)</p>
                       </div>
                    <div class="col-lg-4 footer-item">
                            <h3 class="footer-header">Где можно
                             получить фотографии?</h3>
                        <p><span>- ул. Кабалевского, 13</span><br/>
                            (возле Парка культуры и отдыха)</p>
                       </div>
                        <div class="col-lg-4 footer-item">
                            <h3 class="footer-header">У Вас остались вопросы?</h3>
                            <p>-Напиши нам в ВКонтакте или
                                <span>WhatsApp: +7(922)32-55-725</span></p>
                        </div>
                    </div>
                </div>

                   <div class="block-social">
                    <div class="social-btn">
                    <img src="img/vk.png" alt="">
                    <img src="img/instagram.png" alt="">
                    <img src="img/twiter.png" alt="">
                       </div>
                    </div>

            </div>

</div>
</body>

body{
    background: #fff;
    color: #000;
    font-weight: 400;
    min-width: 320px;
    padding: 0;
    margin: 0;
    height: 100%;
}


img{
    max-width: 100%;
    height: auto;

}






.main-bg {
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 3

Комментировать

3 комментария

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 6 часов назад
- 49 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 14 часов назад
- 55 просмотров
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 16 часов назад
- 53 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- вчера
- 114 просмотров
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- вчера
- 108 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 22 дек.
- 117 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 22 дек.
- 84 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- 21 дек.
- 73 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 33 просмотра
1

ответ
Показать ещё Загружается…

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 120 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Помочь с регистрацией на linkedin

24 дек. 2024, в 15:54

300 руб./за проект

Верстка респонзивной заглушки

24 дек. 2024, в 15:42

2000 руб./за проект

Сделать 3 банера для групп в ВК

24 дек. 2024, в 15:05

1000 руб./за проект

Answer 1 · 2016-10-18 12:36:07

container-fluid не должен занимать всю высоту.
Используйте единицы измерения vh. 100vh = 100% от высоты экрана
Поддержка хорошая caniuse.com/#search=vh

Answer 2 · 2016-10-18 10:02:21

GreatRash @GreatRash

container-fluid - означает, что он займёт всю ширину окна, а не высоту.

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2016-10-18 07:27:14

если контейнер прямой ребенок от body и у body height: 100%, то указав такой height контейнеру он растянется на всю высоту, если же не прямой ребенок, то нужно такой height указать всем его родителям
либо же использовать js, jquery

$('#js-block').height($(window).height());

Answer 4 · 2016-10-18 10:09:13

Олег @ptrvch

вебдев-энтузиаст. Django, AngularJS

Попробуйте так:

html, body {
    min-height: 100%;
}

Ответ написан более трёх лет назад

Комментировать

Как задать высоту под разрешения экрана?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт