Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.74/35: Рейтинг темы: голосов - 35, средняя оценка - 4.74
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
1

Растянуть бэкграунд по высоте

16.07.2014, 14:21. Показов 6459. Ответов 20
Метки нет (Все метки)

Здравствуйте, форумчане!

Не кидайтесь помидорками, пожалуйста, я знаю, что эта тема - давний баян, но я нашла несостыковку.
Значится, в чем вопрос: Дано у меня body, у которого бэкграунд - картинка. Тан у меня внутренний div, у которого бэкграунд - градиент. У меня изначально был косяк - картинка шла по всему пространству экрана, а градиент захватывал только содержимое. Мне же его нужно на ту же область растянуть, что и body. В чем я нашла решение:
html, body {height: 100%;}
И все работает! Но.
Если я увеличиваю масштаб до появления полосы прокрутки (проверяю с позиции юзверя со зрением в -over9000 или просто владельцев мониторов с разрешением 800х600 ), то бэкграунд дива (тот, что градиент) распространяется только на... скажем так, один экран. Т.е. прокрутил ниже - а там только картинка, без градиента.
Как справиться с этим?
Заранее спасибо.

Добавлено через 1 минуту
Кстати, если масштаб страницы наоборот уменьшаю, то все растягивается, как и положено.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.07.2014, 14:21
Ответы с готовыми решениями:

Как растянуть бэкграунд для всех браузеров на весь экран?
Товарищи, добрый день. Знаю я мало, но вот пытаюсь украсить свой сайт. Сделал его в юкозе, но хочу...

Как растянуть li по высоте
Может кто подскажет, столкнулся я с такой такой задачей. Есть блок ul в нем находиться порядка 4-5...

Растянуть блок по всей высоте
Здравствуйте! Есть html код <!DOCTYPE HTML> <html> <head> <title>Малакден</title> ...

Растянуть текст по высоте - CSS
Помогите, нужно текст вытянуть по высоте, оставив слова узкими:(

20
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
16.07.2014, 14:51 2
Попробуйте min-height: 100%
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 15:05 3
может подойдет
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<meta charset="utf-8">
<title>BG</title>
<style>
body {
  background: url(bg.jpg);
  margin: 0;
  position: relative;}
body:after {
  background-image: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.29), rgba(255, 0, 255, 0.49)); /*для разных браузеров нужно добавлять свой градиент*/
  content: "";
  height: 100%;
  left: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;}
.content {
  height: 2000px;
  margin: auto;
  width: 960px;}
</style>
<div class="content"></div>
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 15:18  [ТС] 4
Цитата Сообщение от vovandr Посмотреть сообщение
Попробуйте min-height: 100%
не прошло

Цитата Сообщение от _Я_ Посмотреть сообщение
может подойдет
градиент наплыл сверху всего и растянулся по контенту. Если уменьшаю масштаб, появляется не заполненная им область
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 15:20 5
есть ссылка на ресурс?
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 15:46  [ТС] 6
Цитата Сообщение от _Я_ Посмотреть сообщение
есть ссылка на ресурс?
сайт на локалке
но могу кинуть код
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 15:47 7
Цитата Сообщение от Randow Посмотреть сообщение
но могу кинуть код
давай
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 16:02  [ТС] 8
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div id="main">
 
    <div id="header">
    </div>
    <div id="left-menu">
        <div class="left-menu-item">
        </div>
        <div class="left-menu-item">
        </div>
        <div class="left-menu-item">
        </div>
        <div class="left-menu-item">
        </div>
        <div class="left-menu-item">
        </div>
    </div>
</div>
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
@charset "utf-8";
/* CSS Document */
 
*{
    padding:0;
    margin:0;
}
html{
    height:100%;
}
 
body {
    min-width: 1024px;
    height: 100%;
    background-image:url(images/4.png);
    margin: 0;
}
 
#main{
    background: radial-gradient(at 50% 0, rgba(0,0,0,0), rgba(0,0,0,1));
    height:100%;
}
 
#header{
    height: 317px;
    background:url(images/black.png);
    border-bottom: 2px solid rgba(55,118,221,1);
    box-shadow: 0 20px 15px -15px rgba(0, 0, 0, 1);
}
 
#left-menu{
    height: 414px;
    width: 94px;
    margin-top: 74px;
}
 
.left-menu-item{
    background:url(images/black.png);
    height: 81px;
    width: 94px;
    border-radius: 0 6px 6px 0;
    margin-bottom:4px;
    margin-top:4px;
    border: 2px solid rgba(55,118,221,1);
    border-left:none;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.8);
}
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 16:11 9
Лучший ответ Сообщение было отмечено Randow как решение

Решение

как то так
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
    min-width: 1024px;
    height: 100%;  /*убрать*/
    background-image:url(bg.jpg);
    margin: 0;
    position: relative; /*добавить*/    
    }
body:after {
  background: radial-gradient(at 50% 0, rgba(0,0,0,0), rgba(0,0,0,1));
  content: "";
  height: 100%;
  left: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;} /*добавить*/
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 16:26  [ТС] 10
Цитата Сообщение от _Я_ Посмотреть сообщение
как то так
Растянуть бэкграунд по высоте

при масштабе в 90% (да и в 100 то же самое) идет вот так.
Я явно что-то не понимаю...
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
16.07.2014, 16:36 11
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
    *{
    padding:0;
    margin:0;
}
 html{
    height: 100%;
 }
body {
    height: 100%;
    min-width: 1024px;
    background-image:url(images/4.png);
    margin: 0;
}
 
#main{
    background: radial-gradient(at 50% 0, rgba(0,0,0,0), rgba(0,0,0,1));
    min-height: 100%;
}
 
#header{
    height: 317px;
    background:url(images/black.png);
    border-bottom: 2px solid rgba(55,118,221,1);
    box-shadow: 0 20px 15px -15px rgba(0, 0, 0, 1);
}
 
#left-menu{
    height: 414px;
    width: 94px;
    margin-top: 74px;
}
 
.left-menu-item{
    background:url(images/black.png);
    height: 81px;
    width: 94px;
    border-radius: 0 6px 6px 0;
    margin-bottom:4px;
    margin-top:4px;
    border: 2px solid rgba(55,118,221,1);
    border-left:none;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.8);
}
1
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 16:46  [ТС] 12
почти...
Растянуть бэкграунд по высоте
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 16:49  [ТС] 13
на мониторе 1600х900 выплывает то же самое при 100%
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 16:50 14
Лучший ответ Сообщение было отмечено Randow как решение

Решение

Цитата Сообщение от Randow Посмотреть сообщение
почти...
CSS
1
2
3
#left-menu {
height: 414px; - убери
}
1
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
16.07.2014, 16:51 15
Цитата Сообщение от Randow Посмотреть сообщение
на мониторе 1600х900 выплывает то же самое при 100%
Не правда у меня 2550 ... mac 27 и ничего не выплывает
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 16:56  [ТС] 16
Цитата Сообщение от _Я_ Посмотреть сообщение
height: 414px; - убери
Спасибо, логика проявилась, но в таком случае у меня вопрос появился (голова уже не варит), почему пришолсь убирать фиксированную величину блока меню? Таким образом произошло растягивание под контент, да, но тень контентом не считается... Фикс. высота дива под меню могла добавить пространства... Логично ведь, нет?

Добавлено через 1 минуту
Цитата Сообщение от vovandr Посмотреть сообщение
Не правда у меня 2550 ... mac 27 и ничего не выплывает
С одной стороны это круто, ибо самый сок на таком работать но вдруг вот такие косяки появятся?..
0
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
16.07.2014, 16:58 17
К #main добавь padding нижний на высоту тени и все. Вообще верстка у вас полное г...Извините конечно
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 17:00 18
Цитата Сообщение от Randow Посмотреть сообщение
Фикс. высота дива под меню могла добавить пространства
он и так добавляет, так как в нем есть другие дивы которые тянут его по высоте
добавь этот кусочек чтобы shadow не обрезался
CSS
1
2
3
#main {
padding-bottom: 10px;
}
Добавлено через 1 минуту
Цитата Сообщение от vovandr Посмотреть сообщение
Вообще верстка у вас полное
да можно сделать намного проще
0
0 / 0 / 0
Регистрация: 27.01.2014
Сообщений: 49
16.07.2014, 17:04  [ТС] 19
Цитата Сообщение от vovandr Посмотреть сообщение
Вообще верстка у вас полное г...
Цитата Сообщение от _Я_ Посмотреть сообщение
да можно сделать намного проще
Простите, чайник еще
А проще - это как?
0
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
16.07.2014, 17:10 20
Цитата Сообщение от Randow Посмотреть сообщение
А проще - это как?
так сразу сказать не могу, так как не видел макет страницы (или что другое), но стили можно более адаптированные сделать
Да и добавь
CSS
1
2
3
#main {
box-sizing: border-box;
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.07.2014, 17:10

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Растянуть картинку по высоте body
Всем привет, есть такая проблема, есть картинка, я ее растягиваю в блоке повторением до...

Растянуть div на 100% по высоте
Похожие темы на форуме вроде есть, но ответа так и не нашел. Такая ситуация div внутри div'a,...

Растянуть див по высоте содержимого
Доброе время суток! Помогите пожалуйста есть разметка. Три дива вложены один в другой &lt;div...

Как растянуть див по высоте
Как растянуть див по высоте если элементы внутри него сфлоачены. Текст и картинка сползают вниз а...

Как растянуть картинку по высоте?
Ребята такая проблема я хочу сделать фоном картинку. но выходит что в моём случае берутся картинка...

Не могу растянуть по высоте меню
Здравствуйте, использую bootstrap, при уменьшении экрана левое меню (План, разборка) не...


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

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

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