Как изменить значения div в css, чтобы расстояния между блоками div не было?

@gamid92 · Регистрация: 20.12.2014

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

Приветствую! Не могу решить такую задачу.
Имеется общая обертка div (wrap). Внутри div-wrap имеется 3 div - header, content и foot. При изменении окна браузера, эти div стоят на своих позициях. Необходимо чтоб их высота была автоматическая. Т.е. при изменении размера окна браузера, все 3 div изменяли свою высоту, (ширину они меняют), и не оставляли пустое место, а были впритык друг к другу.

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
  
<body>
<div class="wrap">
    <!-- header start -->
    <div id="header">
        <a href="index.html" ><img id="az-shap" /></a>
    </div>
    <!-- header end-->
 
    <!-- content-start -->
    <div id="content">
        <img id="uzor-top" />
        <div id="content-wrap"></div>
        <img id="uzor-bottom" />
    </div>
    <!-- content-end -->
 
 
<!--footer-start-->
<div class="foot">
    <div class="copy">
    test
    </div>
    <div id="bottom_info">
            123456789
            test@mail.ru
            
        </div>
</div>
<!--footer-end-->
 
</div><!--end wrap-->
 
</body>
</html>

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
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
.wrap{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
 
/*
-------------------------header-start--------------------
*/
#header {
    width: auto;
    position: relative;
}
#az-shap{
    background: url(../img/header.jpg) no-repeat ;
    position: relative;
    width: 100%;
    height: 220px;
    *overflow: hidden;
    
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    }
 
/*
-------------------------header-end--------------------
*/
 
 
 
/*-------------------------content-start-------------------------------*/
#content{
 
    }
#uzor-top{
    background: url(../img/uzor-top.png) no-repeat ;
    position: relative;
    width: 100%;
    height:100%;
    padding: 100px 0px;
    
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
}
#uzor-bottom{
    background: url(../img/uzor-bottom.png) no-repeat ;
    position: relative;
    width: 100%;
    height:100%;
    padding: 100px 0px;
    
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
}
 
/*-------------------------content-end-------------------------------*/
 
 
 
/*
-----------------FOOTER-start-------------------------------
*/
.foot{
    position: relative;
    width: 100%;
    height:110px;
    padding: 20px 0;
    background: #252525;
    color: #fff;
}
.copy {
    position: absolute;
    width:70%;
    text-align:left;
}
#bottom_info {
    position: absolute;
    width: 30%;
    text-align: left;
    *border-left: 1px solid #ccc;
    left: 70%;
}
#bottom_info a:visited {
    color: #ccc;
}
#bottom_info a:link {
    color: #ccc;
}
/*
-----------------FOOTER-end-------------------------------
*/

@WebProggramist · 01.03.2016, 13:46

height: auto; не?

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@WebProggramist 5 / 5 / 9 Регистрация: 24.06.2015 Сообщений: 64
	01.03.2016, 13:46
	height: auto; не? 0