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

@Randow · Регистрация: 27.01.2014

Author24 — интернет-сервис помощи студентам

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

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

), то бэкграунд дива (тот, что градиент) распространяется только на... скажем так, один экран. Т.е. прокрутил ниже - а там только картинка, без градиента.
Как справиться с этим?
Заранее спасибо.

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

@vovandr · 16.07.2014, 14:51

Попробуйте min-height: 100%

@_Я_ · 16.07.2014, 15:05

может подойдет

HTML5

<!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>

@Randow · 16.07.2014, 15:18 **[ТС]**

Сообщение от vovandr

Попробуйте min-height: 100%

не прошло

Сообщение от _Я_

может подойдет

градиент наплыл сверху всего и растянулся по контенту. Если уменьшаю масштаб, появляется не заполненная им область

@_Я_ · 16.07.2014, 15:20

есть ссылка на ресурс?

@Randow · 16.07.2014, 15:46 **[ТС]**

Сообщение от _Я_

есть ссылка на ресурс?

сайт на локалке

но могу кинуть код

@_Я_ · 16.07.2014, 15:47

Сообщение от Randow

но могу кинуть код

давай

@Randow · 16.07.2014, 16:02 **[ТС]**

HTML5

<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

@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);
}

@_Я_ · 16.07.2014, 16:11

как то так

CSS

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;} /*добавить*/

@Randow · 16.07.2014, 16:26 **[ТС]**

Сообщение от _Я_

как то так

при масштабе в 90% (да и в 100 то же самое) идет вот так.
Я явно что-то не понимаю...

@vovandr · 16.07.2014, 16:36

CSS

    *{
    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);
}

@Randow · 16.07.2014, 16:46 **[ТС]**

почти...

@Randow · 16.07.2014, 16:49 **[ТС]**

на мониторе 1600х900 выплывает то же самое при 100%

@_Я_ · 16.07.2014, 16:50

Сообщение от Randow

почти...

CSS

1
2
3

#left-menu {
height: 414px; - убери
}

@vovandr · 16.07.2014, 16:51

Сообщение от Randow

на мониторе 1600х900 выплывает то же самое при 100%

Не правда у меня 2550 ... mac 27 и ничего не выплывает

@Randow · 16.07.2014, 16:56 **[ТС]**

Сообщение от _Я_

height: 414px; - убери

Спасибо, логика проявилась, но в таком случае у меня вопрос появился (голова уже не варит), почему пришолсь убирать фиксированную величину блока меню? Таким образом произошло растягивание под контент, да, но тень контентом не считается... Фикс. высота дива под меню могла добавить пространства... Логично ведь, нет?

Добавлено через 1 минуту

Сообщение от vovandr

Не правда у меня 2550 ... mac 27 и ничего не выплывает

С одной стороны это круто, ибо самый сок на таком работать

но вдруг вот такие косяки появятся?..

@vovandr · 16.07.2014, 16:58

К #main добавь padding нижний на высоту тени и все. Вообще верстка у вас полное г...Извините конечно

@_Я_ · 16.07.2014, 17:00

Сообщение от Randow

Фикс. высота дива под меню могла добавить пространства

он и так добавляет, так как в нем есть другие дивы которые тянут его по высоте
добавь этот кусочек чтобы shadow не обрезался

CSS

1
2
3

#main {
padding-bottom: 10px;
}

Добавлено через 1 минуту

Сообщение от vovandr

Вообще верстка у вас полное

да можно сделать намного проще

@Randow · 16.07.2014, 17:04 **[ТС]**

Сообщение от vovandr

Вообще верстка у вас полное г...

Сообщение от _Я_

да можно сделать намного проще

Простите, чайник еще

А проще - это как?

@_Я_ · 16.07.2014, 17:10

Сообщение от Randow

А проще - это как?

так сразу сказать не могу, так как не видел макет страницы (или что другое), но стили можно более адаптированные сделать
Да и добавь

CSS

1
2
3

#main {
box-sizing: border-box;
}

@Randow 0 / 0 / 0 Регистрация: 27.01.2014 Сообщений: 49
	16.07.2014, 16:46 [ТС]	12
	почти... 0

@Randow 0 / 0 / 0 Регистрация: 27.01.2014 Сообщений: 49
	16.07.2014, 16:49 [ТС]	13
	на мониторе 1600х900 выплывает то же самое при 100% 0

@Randow 0 / 0 / 0 Регистрация: 27.01.2014 Сообщений: 49
	16.07.2014, 17:04 [ТС]	19
	Сообщение от vovandr Вообще верстка у вас полное г... Сообщение от _Я_ да можно сделать намного проще Простите, чайник еще А проще - это как? 0

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

Решение

Решение

@Randow 0 / 0 / 0 Регистрация: 27.01.2014 Сообщений: 49
		1
	Растянуть бэкграунд по высоте 16.07.2014, 14:21. Показов 7286. Ответов 20 Метки нет (Все метки) Здравствуйте, форумчане! Не кидайтесь помидорками, пожалуйста, я знаю, что эта тема - давний баян, но я нашла несостыковку. Значится, в чем вопрос: Дано у меня body, у которого бэкграунд - картинка. Тан у меня внутренний div, у которого бэкграунд - градиент. У меня изначально был косяк - картинка шла по всему пространству экрана, а градиент захватывал только содержимое. Мне же его нужно на ту же область растянуть, что и body. В чем я нашла решение: html, body {height: 100%;} И все работает! Но. Если я увеличиваю масштаб до появления полосы прокрутки (проверяю с позиции юзверя со зрением в -over9000 или просто владельцев мониторов с разрешением 800х600 ), то бэкграунд дива (тот, что градиент) распространяется только на... скажем так, один экран. Т.е. прокрутил ниже - а там только картинка, без градиента. Как справиться с этим? Заранее спасибо. Добавлено через 1 минуту Кстати, если масштаб страницы наоборот уменьшаю, то все растягивается, как и положено. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	16.07.2014, 14:51	2
	Попробуйте min-height: 100% 0

@Randow 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

@Randow 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

@Randow 0 / 0 / 0 Регистрация: 27.01.2014 Сообщений: 49
	16.07.2014, 16:26 [ТС]	10
	Сообщение от _Я_ как то так при масштабе в 90% (да и в 100 то же самое) идет вот так. Я явно что-то не понимаю... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	16.07.2014, 16:51	15
	Сообщение от Randow на мониторе 1600х900 выплывает то же самое при 100% Не правда у меня 2550 ... mac 27 и ничего не выплывает 0

@Randow 0 / 0 / 0 Регистрация: 27.01.2014 Сообщений: 49
	16.07.2014, 16:56 [ТС]	16
	Сообщение от _Я_ height: 414px; - убери Спасибо, логика проявилась, но в таком случае у меня вопрос появился (голова уже не варит), почему пришолсь убирать фиксированную величину блока меню? Таким образом произошло растягивание под контент, да, но тень контентом не считается... Фикс. высота дива под меню могла добавить пространства... Логично ведь, нет? Добавлено через 1 минуту Сообщение от vovandr Не правда у меня 2550 ... mac 27 и ничего не выплывает С одной стороны это круто, ибо самый сок на таком работать но вдруг вот такие косяки появятся?.. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	16.07.2014, 16:58	17
	К #main добавь padding нижний на высоту тени и все. Вообще верстка у вас полное г...Извините конечно 0