Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.89/9: Рейтинг темы: голосов - 9, средняя оценка - 4.89
vladimir8686
33 / 33 / 4
Регистрация: 27.05.2012
Сообщений: 173
Записей в блоге: 5
1

Bootstrap, задать высоту в %

04.09.2015, 08:29. Просмотров 1815. Ответов 2
Метки нет (Все метки)

Осваиваю бутстрап, экспериментирую маленько, столкнулся с проблемой и не знаю как решить. Хочу 2-м div'ам задать высоту в % (.jumbotron {height: 90%}, #lower {height: 10%}), но почему-то не получается (возможно, бутстрап тут совсем не причем).
index.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
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>Test Bootstrap Site</title>
</head>
<body>
    <div class="container" id="main_container">
        <div class="jumbotron">
            <h2>Hello! Test Test Test!</h2>
            <button class="btn btn-success">Awesome Button</button>
        </div>
    </div>
    <div class="container" id="lower">
            <div class="nav">
                <ul class="nav nav-pills">
                    <li role="presentation" ><a href="#">Some Text</a></li>
                    <li role="presentation" ><a href="#">Some Text</a></li>
                    <li  role="presentation" class="active"><a href="">Some Text</a></li>
                    <li role="presentation" ><a href="#">Some Text</a></li>
                </ul>
            </div>
        </div>
    <script src="./js/jquery-2.1.4.min.cs"></script>
    <script src="./scripts/bootstrap.min.js"></script>
</body>
</html>
style.css:
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
html, body{
    height: 100%;
}
 
#main_container{
    width: 100%;
    background: url("../images/bg.jpg") center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
 
}
 
.jumbotron{
    height: 90%;
    background-color: transparent;
}
 
.jumbotron h2{
    font-size: 60px;
    color: white;
    font-weight: bold;
}
 
#lower{
    height:10%;
}
Имеем:
del
Причем, если задать в высоту в пикселях, то все работает, не понимаю почему в % не хочет?
0
Миниатюры
Bootstrap, задать высоту в %  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.09.2015, 08:29
Ответы с готовыми решениями:

Как подогнать высоту блоков? (Bootstrap)
Ниже приведу код верстки и скриншот, на котором указаны нюансы. Основной вопрос...

Как сделать высоту 100% относительно родителя bootstrap 3
Здравствуйте! http://rghost.ru/7B5nJSZGV/image.png Выше графическое...

Как сделать section на всю высоту экрана, работаю в bootstrap
Такая вот проблемка, скачал себе на локальный сервер бесплатный готовый шаблон...

Есть ли в Twitter Bootstrap класс позволяющий адаптивно выравнивать высоту блоков?
Суть задачи: На странице расположен график и панель справа от него. Текст...

задать высоту инпута
Всем привет, Подскажите, пожалуйста, есть либа jquery chosen либа, пользуя...

2
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
04.09.2015, 09:28 2
CSS
1
2
3
4
5
6
7
#main_container{
 height: 100%;
}
.jumbotron{
    height: 100%;
    background-color: red;
}
1
vladimir8686
33 / 33 / 4
Регистрация: 27.05.2012
Сообщений: 173
Записей в блоге: 5
04.09.2015, 10:05  [ТС] 3
Вот же ж я дурак. Маялся седня в 3ч ночи, с утра решил, что ничего не получилось и надо запостить трабл на форум. Полезный совет всем на будущее - ночью надо спать, чтобы с утра не тупить)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.09.2015, 10:05

Задать высоту пунктам меню
Здравствуйте. Я совсем новичок. Горизонтальное главное меню. &lt;ul...

Не получается задать высоту nav
Здрасте! Пытаюсь сделать меню. Пишу: nav {width:820px;} nav ul...

Задать стили тега из класса bootstrap
Использую bootstrap 3. Там если хочется использовать его оформление, то каждому...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru