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

Question

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

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

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

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

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 комментария

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

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

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

Войти через центр авторизации

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

HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- час назад
- 18 просмотров
1

ответ
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 4 часа назад
- 32 просмотра
0

ответов
HTML

Простой
Как выставить фото в select?
- 1 подписчик
- 6 часов назад
- 51 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 19 часов назад
- 82 просмотра
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 23 часа назад
- 46 просмотров
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- вчера
- 93 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- вчера
- 34 просмотра
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
Bootstrap

+1 ещё

Простой
Как правильно скопировать google карту в модальное окно и добавить в неё указатели?
- 1 подписчик
- вчера
- 15 просмотров
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- вчера
- 54 просмотра
0

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработка мобильного приложения на Flutter

27 апр. 2024, в 18:55

1700 руб./в час

Написать раздел ВКР

27 апр. 2024, в 18:49

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

Создать 3д модели 7 караблей в субд Линтер

27 апр. 2024, в 18:43

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

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

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

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

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

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

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

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