Фон на всю высоту блока

@phpk · Регистрация: 15.05.2013

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

Подскажите, как реализовать, чтобы фон был на всю высоту блока "article", а не на всю высоту контента?
В строке 42 указана высота в 100%, почему тогда высота фона не растягивается на всю высоту блока?

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
 
        header {
            width: 100%;
            /*position: relative;*/
            height: 200px;
            background-color: yellow;
        }
 
        .wrapper {
            width: 100%;
            max-width: 1200px;
            min-height: 100%;
            background-color: green;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, .7);
            position: relative;
        }
 
        aside {
            width: 20%;
            float: left;
            background-color: coral;
            position: absolute;
            top: 0;
        }
 
        article {
            width: 79.5%;
            height: 100%;
            position: relative;
            margin-left: 20%;
            background-color: aqua;
            background: url("pic/pic-1.png");
        }
 
        footer {
            clear: both;
            width: 100%;
            height: 150px;
            background-color: #000;
            position: relative;
            bottom: 0;
        }
    </style>
</head>
<body>
 
<header>Header</header>
<div class="wrapper">
    <aside>Aside</aside>
    <article>
        Article
        Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста.
        Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из
        этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику.
        Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
    </article>
</div>
<footer>Footer</footer>
 
 
</body>
</html>

@prudkiy · 13.02.2015, 03:19

Как понял вы хотите поставить изображение на 100% фоном.
Тогда просто делаете 2 оболочки.

HTML5
1
2
<div id="fon"></div>
<div id="content">Content</div>

и прописываете стили

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#fon {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("ok.png");
    z-index: 0
}
#content {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: none;
    z-index: 999999
}

@phpk · 13.02.2015, 10:11 **[ТС]**

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

Как понял вы хотите поставить изображение на 100% фоном.

не совсем то что надо!
Мне нужно фон не для страницы, а для блока контента!
А в вашем примере фон остаётся на своём месте, а нужно чтобы прокручивался вместе с контентом.
Имеется оболочка wrapper, и два внутренних плавающих блока - aside и article, расположенные слева и справа.
Так вот нужно сделать фон для article!!!
для article высота указана 100%, не фиксирована, поэтому изображение не растягивается выше контента!
Как это исправить?

@sashok89 · 13.02.2015, 10:25

Попробуйте следующее

CSS
1
2
3
4
5
6
7
8
9
10
article {
width: 79.5%;
height: 100%;
position: relative;
margin-left: 20%;
background-color: aqua;
background: url("pic/pic-1.png");
 
background-size: cover; /*со всеми префиксами*/
        }

и для общего развития, прочитайте http://htmlbook.ru/css/background-size

@phpk · 13.02.2015, 10:40 **[ТС]**

и для общего развития

проверьте, фон на всю высоту или нет?!

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        article {display: block}
 
        header {
            width: 100%;
            /*position: relative;*/
            height: 200px;
            background-color: yellow;
        }
 
        .wrapper {
            width: 100%;
            max-width: 1200px;
            min-height: 100%;
            background-color: green;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, .7);
            position: relative;
        }
 
        aside {
            width: 20%;
            float: left;
            background-color: coral;
            position: absolute;
            top: 0;
        }
 
        article {
            width: 79.5%;
            max-height: 100%;
            position: relative;
            margin-left: 20%;
            background-color: aqua;
            background: url("pic/pic-1.png");
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
 
        footer {
            clear: both;
            width: 100%;
            height: 150px;
            background-color: #000;
            position: relative;
            bottom: 0;
        }
    </style>
</head>
<body>
 
<header>Header</header>
<div class="wrapper">
    <aside>Aside</aside>
    <article>
        Article
        Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста.
        Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из
        этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику.
        Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
    </article>
</div>
<footer>Footer</footer>
 
 
</body>
</html>

@sashok89 · 13.02.2015, 10:41

Я думаю что должен быть!
А что-то не так?

@phpk · 13.02.2015, 10:44 **[ТС]**

у меня не на всю

Добавлено через 39 секунд

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

Я думаю что должен быть!

нужно для начала проверить, а потом думать

@sashok89 · 13.02.2015, 10:45

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

нужно для начала проверить, а потом думать

я предложил вам помощь, а вы грубите!

@phpk · 13.02.2015, 11:16 **[ТС]**

я не грубил, извините если что не так.
Так как же правильней нужно?

Добавлено через 6 минут
Просто я уже перепробовал уже этот background-size: cover и другие подобные не раз, и ничего не получается!

Добавлено через 20 минут
простите пожалуйста ещё раз, если что не так. Как же это сделать правильно, т.е. фон?

@prudkiy · 13.02.2015, 12:12

Все равно не понял. Фон у блока будет всегда на его высоту.
Высота всегда устанавливается:
а. Исходя из содержимого блока
б. Указанием высоты в пикселях или пунктах
в. Указанием высоты в процентах, но при этом блок должен позиционирован абсолютно или быть фиксированным.
Возможно вам нужно просто чтоб все блоки имели одинаковою высоту, исходя из самого большого ?

@phpk · 13.02.2015, 12:30 **[ТС]**

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

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

верно

@prudkiy · 13.02.2015, 16:03

Тогда так, правда через javascript с использованием jQuery (другого хорошо способа, к сожалению, я пока не знаю)
Допустим нам нужно выровнять два блока

HTML5
1
2
3
<div id="leftBlock"></div>
<div id="rightBlock"></div>
<div class="clear"></div>

Пропишем для них стили

CSS
1
2
3
4
5
6
7
8
9
10
11
.clear {
    clear: both;
}
#leftBlock {
    float: left;
    width: 50%
}
#rightBlock {
   float: left;
   width: 50%
}

Подключим библиотеку jQuery, правда данный способ не локальный т.е. чтоб все работало необходимо подключение к интернету. Подключение прописывается в шапке

JavaScript
1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

и напишем код js, можно сразу за подключением jQuery или подключить отдельным файлом, только не забывайте - сначала должен быть подключен jQuery. В 17 строке указываете блоки которые будут выравниваться по высоте, через запятую

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
 function setEqualHeight(columns)
 {
 var tallestcolumn = 0;
 columns.each(
 function()
 {
 currentHeight = $(this).height();
 if(currentHeight > tallestcolumn)
 {
 tallestcolumn  = currentHeight;
 }
 }
 );
 columns.height(tallestcolumn);
 }
 setEqualHeight($("#leftBlock ,#rightBlock "));//идентификаторы блоков которые будут выравниваться по высоте относительно друг друга
});

@phpk · 15.02.2015, 23:41 **[ТС]**

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

Тогда так, правда через javascript с использованием jQuery

Благодарю за дельный совет!
Кстати теперь появился другой вопрос, вытекающий из приведённого вами решения.
Если применить ваш js-код, то при увеличении масштаба нижний текст заходит за футер и его (текст) не видно.
Это конечно, естественно, потому что блоку назначен фиксированный размер с помощью js.
Так вот как избежать этого? Т.е. чтобы текст не заходил за футер

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
            height: 100%;
        }
 
        body {
            background-color: #fff;
            font-family: Verdana sans-serif;
        }
 
        header {
            width: 100%;
            height: 100px;
            position: relative;
            background-color: aqua;
            z-index: 100;
        }
 
        #wrapper {
            width: 100%;
            max-width: 1400px;
            font-size: 1.2em;
            min-height: 100%;
            background-color: #E6E4E6;
            margin-left: auto;
            margin-right: auto;
            /*margin-bottom: -10px;*/
            text-align: center;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, .7);
            position: relative;
        }
 
        #inner-wrapper {
            width: 80%;
            height: 100%;
            position: relative;
            margin-left: 20%;
            background-color: yellow;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
        }
 
        aside {
            width: 20%;
            height: 100%;
            position: absolute;
            top: 0;
            background-color: coral;
        }
 
        article {
            width: 100%;
            margin: 0 auto;
        }
 
        footer {
            width: 100%;
            height: 150px;
            background-color: #000;
            position: relative;
            bottom: 0;
            overflow: hidden;
            color: #fff;
        }
    </style>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script>
        //        window.onload=function(){
        //            var wrap=document.getElementById("wrapper");
        //            var inwrap=document.getElementById("inner-wrapper");
        //            inwrap.style.height=wrap.clientHeight+'px';
        //        }
        $(document).ready(function () {
            function setEqualHeight(columns) {
                var tallestcolumn = 0;
                columns.each(
                        function () {
                            currentHeight = $(this).height();
                            if (currentHeight > tallestcolumn) {
                                tallestcolumn = currentHeight;
                            }
                        }
                );
                columns.height(tallestcolumn);
            }
 
            setEqualHeight($("#wrapper ,#inner-wrapper "));//идентификаторы блоков которые будут выравниваться по высоте относительно друг друга
        });
    </script>
</head>
<body>
 
<header>Header</header>
<div id="wrapper">
    <div id="inner-wrapper">
        <article> Много текста про практику работы с PHPUnit/DbUnit
            PHP*
            Доброго времени суток, друзья!
            Хочу поделиться опытом по борьбе с PHPUnit/DbUnit в связке с MySQL. Далее небольшая предыстория.
 
            Краткая предыстория
 
            В процессе написания одного веб-приложения возникла необходимость тестировать код на PHP, интенсивно
            взаимодействующий с БД MySQL. В проекте в качестве фреймворка модульного тестирования использовался порт
            xUnit — PHPUnit. В результате было принято решение писать тесты для модулей, непосредственно
            взаимодействующих с базой, подцепив плагин PHPUnit/DbUnit. Дальше я расскажу о тех трудностях, которые
            возникли при написании тестов и о том, каким способом я их преодолел. В ответ же хотелось бы получить
            комментарии знающих людей относительно корректности моих решений.
 
            Как работает DbUnit
 
            Подпункт предназначен для тех, кто не знаком с методикой тестирования с использованием PHPUnit и/или DbUnit.
            Кому не интересно, смело можно переходить к следующему.
 
            Далее по тексту:
 
            тестовый класс — класс, содержащий код модульных тестов, наследник любой из реализаций PHPUnit::TestCase;
            тестируемый класс — класс, который необходимо протестировать.
 
            Так как подпункт для начинающих, то для начала будет рассмотрена процедура модульного тестирования обычных
            классов PHP, а потом описаны отличия при тестировании кода, взаимодействующего с БД.
 
            Тестирование обычных классов PHP
 
            Чтобы протестировать класс, написанный на PHP, с использованием фреймворка PHPUnit, необходимо создать
            тестовый класс, расширяющий базовый класс PHPUnit_Framework_TestCase. Затем создать в этом классе публичные
            методы, начинающиеся со слова test (если создать метод, который будет называться по-другому, он не будет
            автоматически вызван при прогоне тестов), и поместить в них код, выполняющий действия с объектами
            тестируемого класса и проверяющий результат. На этом можно закончить и скормить полученный класс phpunit,
            который, в свою очередь, последовательно вызовет все тестовые методы и любезно предоставит отчет об их
            работе. Однако в большинстве случаев в каждом из тестовых методов будет повторяющийся код, подготавливающий
            систему для работы с тестируемым объектом. Для того, чтобы избежать дублирования кода, в классе
            PHPUnit_Framework_TestCase созданы защищенные методы setUp и tearDown, имеющие пустую реализацию. Эти методы
            вызываются перед и после запуска очередного тестового метода соответственно и служат для подготовки системы
            к выполнению тестовых действий и очистки ее после завершения каждого теста. В тестовом классе, расширяющем
            PHPUnit_Framework_TestCase, можно переопределить эти методы и поместить повторяющийся ранее в каждом
            тестовом методе код в них. В результате последовательность вызова методов при прогонке тестов будет
            следующая:
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethod1() {/* протестировали метод 1 класса */}
 
            tearDown() {/* Очистили систему */}
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethod2() {/* протестировали метод 2 класса */}
 
            tearDown() {/* Очистили систему */}
 
            …
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethodN() {/* протестировали метод N класса */}
 
            tearDown() {/* Очистили систему */}
 
 
            Тестирование кода PHP, взаимодействующего с БД
 
            Процесс написания тестов для кода, взаимодействующего с БД, практически не отличается от процедуры
            тестирования обычных классов PHP. Сначала необходимо создать тестовый класс, наследующий
            PHPUnit_Extensions_Database_TestCase (класс PHPUnit_Extensions_Database_TestCase сам при этом наследует
            PHPUnit_Framework_TestCase), который будет содержать тесты для методов тестируемого класса. Затем создать
            тестовые методы, начинающиеся с префикса test, а потом скормить этот код phpunit с указанием имени тестового
            класса. Отличия заключаются лишь в том, что в тестовом классе обязательно необходимо реализовать два
            публичных метода — getConnection() и getDataSet(). Первый метод необходим для того, чтобы научить DbUnit
            работать с БД (придется использовать PDO), а второй для того, чтобы сообщить фреймворку, в какое состояние
            переводить базу данных перед выполнением очередного теста. Под DataSet в терминологии DbUnit понимается
            набор из одной или более таблиц.
        </article>
    </div>
    <aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>

Добавлено через 6 часов 14 минут
Неужели нет решения?!

Добавлено через 2 часа 34 минуты
Вопрос ещё в силе!

Добавлено через 37 минут
Пытался сделать что-то типа такого:

JavaScript
1
2
3
4
5
$(window).resize(function(){
            var h=$("#wrapper").height();
            var inh=$("#inner-wrapper");
            inh.css("height",h+'px');
        })

но это совсем не то!

@prudkiy · 16.02.2015, 09:41

Возможно вам просто подойдет свойство css - overflow http://htmlbook.ru/css/overflow

@phpk · 16.02.2015, 10:28 **[ТС]**

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

Возможно вам просто подойдет свойство css - overflow

а в вышеприведённом коде в строках 39 и 50 разве не overflow ?

Добавлено через 2 минуты
или он не там стоит?

@Fedor92 · 16.02.2015, 12:08

Если я Вас правильно понял Вам надо высоту article сделать равной высоте родительского блока и задать фон для блока... Делал с цветным фоном, поскольку фоновой картинки в моём распоряжении нет...
Первый способ подразумевает использование абсолютного позиционирования:

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
article {
            width: 79.5%;
        height:100%;
        position: absolute;
        right:0;
            margin-left: 20%;
            background-color: aqua;
          }

Если фоновая картинка не займёт всё пространство - Вам уже предлагали использовать background-size...
Способ 2(табличный), на случай если не понравится способ с абсолютным позиционированием:

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 .wrapper {
            width: 100%;
            max-width: 1200px;
            min-height: 100%;
        display:table;
        background-color: green;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, .7);
            position: relative;
        }
article {
            width: 79.5%;
        height:100%;
        margin-left: 20%;
        display:table-cell;
            background-color: aqua;
          }

Берём в руки топоры...

@phpk · 16.02.2015, 13:00 **[ТС]**

Fedor92, ни один ваш приведённый код не решает проблему! Нижний текст заходит за футер!

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
            height: 100%;
        }
 
        body {
            background-color: #fff;
            font-family: Verdana sans-serif;
 
        }
 
        header {
            width: 100%;
            height: 100px;
            position: relative;
            background-color: aqua;
            z-index: 100;
        }
 
        #wrapper {
            width: 100%;
            max-width: 1200px;
            min-height: 100%;
            display: table;
            background-color: green;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, .7);
            position: relative;
        }
 
        #inner-wrapper {
            width: 80%;
            min-height: 100%;
            position: relative;
            margin-left: 20%;
            background-color: yellow;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
        }
        article {
            width: 79.5%;
            height:100%;
            margin-left: 20%;
            display:table-cell;
            background-color: yellow;
        }
        aside {
            width: 20%;
            height: 100%;
            position: absolute;
            top: 0;
            background-color: coral;
        }
        footer {
            width: 100%;
            height: 150px;
            background-color: #000;
            position: relative;
            color: #fff;
        }
    </style>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script>
 
        $(window).resize(function(){
            var h=$("#wrapper").height();
////            alert(h);
            var inh=$("#inner-wrapper");
            inh.css("height",h+'px');
        })
//        $(document).ready(function () {
//            function setEqualHeight(columns) {
//                var tallestcolumn = 0;
//                columns.each(
//                        function () {
//                            currentHeight = $(this).height();
//                            if (currentHeight > tallestcolumn) {
//                                tallestcolumn = currentHeight;
//                            }
//                        }
//                );
//                columns.height(tallestcolumn);
//            }
//
//            setEqualHeight($("#wrapper ,#inner-wrapper "));//идентификаторы блоков которые будут выравниваться по высоте относительно друг друга
//        });
    </script>
</head>
<body>
 
<header>Header</header>
<div id="wrapper">
    <div id="inner-wrapper">
        <article> Много текста про практику работы с PHPUnit/DbUnit
            PHP*
            Доброго времени суток, друзья!
            Хочу поделиться опытом по борьбе с PHPUnit/DbUnit в связке с MySQL. Далее небольшая предыстория.
 
            Краткая предыстория
 
            В процессе написания одного веб-приложения возникла необходимость тестировать код на PHP, интенсивно
            взаимодействующий с БД MySQL. В проекте в качестве фреймворка модульного тестирования использовался порт
            xUnit — PHPUnit. В результате было принято решение писать тесты для модулей, непосредственно
            взаимодействующих с базой, подцепив плагин PHPUnit/DbUnit. Дальше я расскажу о тех трудностях, которые
            возникли при написании тестов и о том, каким способом я их преодолел. В ответ же хотелось бы получить
            комментарии знающих людей относительно корректности моих решений.
 
            Как работает DbUnit
 
            Подпункт предназначен для тех, кто не знаком с методикой тестирования с использованием PHPUnit и/или DbUnit.
            Кому не интересно, смело можно переходить к следующему.
 
            Далее по тексту:
 
            тестовый класс — класс, содержащий код модульных тестов, наследник любой из реализаций PHPUnit::TestCase;
            тестируемый класс — класс, который необходимо протестировать.
 
            Так как подпункт для начинающих, то для начала будет рассмотрена процедура модульного тестирования обычных
            классов PHP, а потом описаны отличия при тестировании кода, взаимодействующего с БД.
 
            Тестирование обычных классов PHP
 
            Чтобы протестировать класс, написанный на PHP, с использованием фреймворка PHPUnit, необходимо создать
            тестовый класс, расширяющий базовый класс PHPUnit_Framework_TestCase. Затем создать в этом классе публичные
            методы, начинающиеся со слова test (если создать метод, который будет называться по-другому, он не будет
            автоматически вызван при прогоне тестов), и поместить в них код, выполняющий действия с объектами
            тестируемого класса и проверяющий результат. На этом можно закончить и скормить полученный класс phpunit,
            который, в свою очередь, последовательно вызовет все тестовые методы и любезно предоставит отчет об их
            работе. Однако в большинстве случаев в каждом из тестовых методов будет повторяющийся код, подготавливающий
            систему для работы с тестируемым объектом. Для того, чтобы избежать дублирования кода, в классе
            PHPUnit_Framework_TestCase созданы защищенные методы setUp и tearDown, имеющие пустую реализацию. Эти методы
            вызываются перед и после запуска очередного тестового метода соответственно и служат для подготовки системы
            к выполнению тестовых действий и очистки ее после завершения каждого теста. В тестовом классе, расширяющем
            PHPUnit_Framework_TestCase, можно переопределить эти методы и поместить повторяющийся ранее в каждом
            тестовом методе код в них. В результате последовательность вызова методов при прогонке тестов будет
            следующая:
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethod1() {/* протестировали метод 1 класса */}
 
            tearDown() {/* Очистили систему */}
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethod2() {/* протестировали метод 2 класса */}
 
            tearDown() {/* Очистили систему */}
 
            …
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethodN() {/* протестировали метод N класса */}
 
            tearDown() {/* Очистили систему */}
 
 
            Тестирование кода PHP, взаимодействующего с БД
 
            Процесс написания тестов для кода, взаимодействующего с БД, практически не отличается от процедуры
            тестирования обычных классов PHP. Сначала необходимо создать тестовый класс, наследующий
            PHPUnit_Extensions_Database_TestCase (класс PHPUnit_Extensions_Database_TestCase сам при этом наследует
            PHPUnit_Framework_TestCase), который будет содержать тесты для методов тестируемого класса. Затем создать
            тестовые методы, начинающиеся с префикса test, а потом скормить этот код phpunit с указанием имени тестового
            класса. Отличия заключаются лишь в том, что в тестовом классе обязательно необходимо реализовать два
            публичных метода — getConnection() и getDataSet(). Первый метод необходим для того, чтобы научить DbUnit
            работать с БД (придется использовать PDO), а второй для того, чтобы сообщить фреймворку, в какое состояние
            переводить базу данных перед выполнением очередного теста. Под DataSet в терминологии DbUnit понимается
            набор из одной или более таблиц.
        </article>
    </div>
    <aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>

Добавлено через 3 минуты
Желаемый результат:
1) футер прижать к низу
2) фон article растянуть на весь экран при масштабировании
3) текст не должен заходить за футер

@Fedor92 · 16.02.2015, 13:50

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

футер прижать к низу

float:left, как вариант...Обычно({position:absolute; botom:0})

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

2) фон article растянуть на весь экран при масштабировании

Ссори не доглядел height:100% у article надо убрать...

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

текст не должен заходить за футер

Для масштабирования, чтобы текст не убегал за пределы можно попробовать использовать js-скрипт для масштабирования текста, чтобы он масштабировался вместе с блоками- либо как вариант попробовать для блока текста использовать внутренние отступы(при этом в теге article для текста использовать обёртку, например заключить текст в тег <p>)

@phpk · 16.02.2015, 14:11 **[ТС]**

Fedor92 кстати сорри, с таблицей ваш вариант работает, только другая теперь проблема.
Теперь если уменьшить масштаб окна допустим до 50% и потом увеличить до 100%, то под текстом остаётся много пустого пространства, вычисленного методом resize. Как это устранить?
Или посоветуйте лучше решение

Добавлено через 21 секунду

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
            height: 100%;
        }
 
        body {
            background-color: #fff;
            font-family: Verdana sans-serif;
 
        }
 
        header {
            width: 100%;
            height: 100px;
            position: relative;
            background-color: aqua;
            z-index: 100;
        }
 
        #wrapper {
            width: 100%;
            max-width: 1400px;
            font-size: 1.2em;
            min-height: 100%;
            background-color: #E6E4E6;
            margin-left: auto;
            margin-right: auto;
            /*margin-bottom: -10px;*/
            text-align: center;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 0, 0, .7);
            position: relative;
        }
 
        #inner-wrapper {
            width: 80%;
            min-height: 100%;
            position: relative;
            margin-left: 20%;
            display:table;
            background-color: yellow;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
        }
        article {
            width: 100%;
            margin: 0 auto;
            display:table-cell;
            /*height: 100%;*/
        }
        p {
            padding: 10px;
        }
        aside {
            width: 20%;
            height: 100%;
            position: absolute;
            top: 0;
            background-color: coral;
        }
        footer {
            width: 100%;
            height: 150px;
            background-color: #000;
            position: relative;
            color: #fff;
        }
    </style>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script>
 
        $(window).resize(function(){
            var h=$("#wrapper").height();
            var inh=$("#inner-wrapper");
            inh.css("height",h+'px');
        })
        //        $(document).ready(function () {
        //            function setEqualHeight(columns) {
        //                var tallestcolumn = 0;
        //                columns.each(
        //                        function () {
        //                            currentHeight = $(this).height();
        //                            if (currentHeight > tallestcolumn) {
        //                                tallestcolumn = currentHeight;
        //                            }
        //                        }
        //                );
        //                columns.height(tallestcolumn);
        //            }
        //
        //            setEqualHeight($("#wrapper ,#inner-wrapper "));//идентификаторы блоков которые будут выравниваться по высоте относительно друг друга
        //        });
    </script>
</head>
<body>
 
<header>Header</header>
<div id="wrapper">
    <div id="inner-wrapper">
        <article><p>Много текста про практику работы с PHPUnit/DbUnit
            PHP*
            Доброго времени суток, друзья!
            Хочу поделиться опытом по борьбе с PHPUnit/DbUnit в связке с MySQL. Далее небольшая предыстория.
 
            Краткая предыстория
 
            В процессе написания одного веб-приложения возникла необходимость тестировать код на PHP, интенсивно
            взаимодействующий с БД MySQL. В проекте в качестве фреймворка модульного тестирования использовался порт
            xUnit — PHPUnit. В результате было принято решение писать тесты для модулей, непосредственно
            взаимодействующих с базой, подцепив плагин PHPUnit/DbUnit. Дальше я расскажу о тех трудностях, которые
            возникли при написании тестов и о том, каким способом я их преодолел. В ответ же хотелось бы получить
            комментарии знающих людей относительно корректности моих решений.
 
            Как работает DbUnit
 
            Подпункт предназначен для тех, кто не знаком с методикой тестирования с использованием PHPUnit и/или DbUnit.
            Кому не интересно, смело можно переходить к следующему.
 
            Далее по тексту:
 
            тестовый класс — класс, содержащий код модульных тестов, наследник любой из реализаций PHPUnit::TestCase;
            тестируемый класс — класс, который необходимо протестировать.
 
            Так как подпункт для начинающих, то для начала будет рассмотрена процедура модульного тестирования обычных
            классов PHP, а потом описаны отличия при тестировании кода, взаимодействующего с БД.
 
            Тестирование обычных классов PHP
 
            Чтобы протестировать класс, написанный на PHP, с использованием фреймворка PHPUnit, необходимо создать
            тестовый класс, расширяющий базовый класс PHPUnit_Framework_TestCase. Затем создать в этом классе публичные
            методы, начинающиеся со слова test (если создать метод, который будет называться по-другому, он не будет
            автоматически вызван при прогоне тестов), и поместить в них код, выполняющий действия с объектами
            тестируемого класса и проверяющий результат. На этом можно закончить и скормить полученный класс phpunit,
            который, в свою очередь, последовательно вызовет все тестовые методы и любезно предоставит отчет об их
            работе. Однако в большинстве случаев в каждом из тестовых методов будет повторяющийся код, подготавливающий
            систему для работы с тестируемым объектом. Для того, чтобы избежать дублирования кода, в классе
            PHPUnit_Framework_TestCase созданы защищенные методы setUp и tearDown, имеющие пустую реализацию. Эти методы
            вызываются перед и после запуска очередного тестового метода соответственно и служат для подготовки системы
            к выполнению тестовых действий и очистки ее после завершения каждого теста. В тестовом классе, расширяющем
            PHPUnit_Framework_TestCase, можно переопределить эти методы и поместить повторяющийся ранее в каждом
            тестовом методе код в них. В результате последовательность вызова методов при прогонке тестов будет
            следующая:
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethod1() {/* протестировали метод 1 класса */}
 
            tearDown() {/* Очистили систему */}
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethod2() {/* протестировали метод 2 класса */}
 
            tearDown() {/* Очистили систему */}
 
            …
 
            setUp() {/* Установили систему в нужное состояние */}
 
            testMethodN() {/* протестировали метод N класса */}
 
            tearDown() {/* Очистили систему */}
 
 
            Тестирование кода PHP, взаимодействующего с БД
 
            Процесс написания тестов для кода, взаимодействующего с БД, практически не отличается от процедуры
            тестирования обычных классов PHP. Сначала необходимо создать тестовый класс, наследующий
            PHPUnit_Extensions_Database_TestCase (класс PHPUnit_Extensions_Database_TestCase сам при этом наследует
            PHPUnit_Framework_TestCase), который будет содержать тесты для методов тестируемого класса. Затем создать
            тестовые методы, начинающиеся с префикса test, а потом скормить этот код phpunit с указанием имени тестового
            класса. Отличия заключаются лишь в том, что в тестовом классе обязательно необходимо реализовать два
            публичных метода — getConnection() и getDataSet(). Первый метод необходим для того, чтобы научить DbUnit
            работать с БД (придется использовать PDO), а второй для того, чтобы сообщить фреймворку, в какое состояние
            переводить базу данных перед выполнением очередного теста. Под DataSet в терминологии DbUnit понимается
            набор из одной или более таблиц.</p>
        </article>
    </div>
    <aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>

@Fedor92 · 16.02.2015, 14:14

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

Fedor92 кстати сорри, с таблицей ваш вариант работает, только другая теперь проблема.
Теперь если уменьшить масштаб окна допустим до 50% и потом увеличить до 100%, то под текстом остаётся много пустого пространства, вычисленного методом resize. Как это устранить?
Или посоветуйте лучше решение

Уберите скрипт вообще и всё на мази...

Я что-то footer домучить не могу... Пять сек...

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 30.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	13.02.2015, 10:41
	Я думаю что должен быть! А что-то не так? 0

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313
	13.02.2015, 11:16 [ТС]
	я не грубил, извините если что не так. Так как же правильней нужно? Добавлено через 6 минут Просто я уже перепробовал уже этот background-size: cover и другие подобные не раз, и ничего не получается! Добавлено через 20 минут простите пожалуйста ещё раз, если что не так. Как же это сделать правильно, т.е. фон? 0

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	13.02.2015, 12:12
	Все равно не понял. Фон у блока будет всегда на его высоту. Высота всегда устанавливается: а. Исходя из содержимого блока б. Указанием высоты в пикселях или пунктах в. Указанием высоты в процентах, но при этом блок должен позиционирован абсолютно или быть фиксированным. Возможно вам нужно просто чтоб все блоки имели одинаковою высоту, исходя из самого большого ? 0

@prudkiy 181 / 149 / 55 Регистрация: 21.07.2013 Сообщений: 958
	16.02.2015, 09:41
	Возможно вам просто подойдет свойство css - overflow http://htmlbook.ru/css/overflow 0