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

Question

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

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

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

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

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 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 8 минут назад
- 4 просмотра
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 8 часов назад
- 69 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 11 часов назад
- 81 просмотр
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 16 часов назад
- 75 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 92 просмотра
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 71 просмотр
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Создать сервер VPS через wireguard

24 нояб. 2024, в 00:04

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

Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)

23 нояб. 2024, в 23:30

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

Нарисовать инфографику в 3-х вариантах

23 нояб. 2024, в 23:03

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

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%;
}

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

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

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

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

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

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