Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/8: Рейтинг темы: голосов - 8, средняя оценка - 5.00
0 / 0 / 1
Регистрация: 16.10.2013
Сообщений: 4

Высота div блока

15.11.2013, 12:34. Показов 1556. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть код:
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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset='UTF-8'>
    
    <title>Закладки на чистом CSS</title>
    
    <link rel='stylesheet' href='css/style.css'>
    
    <style>
    .tabs {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      
      overflow: hidden;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }   
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
    </style>
</head>
 
<body>
 
    <div id="page-wrap">
        
    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Закладка №1</label>
           
           <div class="content">
               <p>Содержание закладки №1</p>
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Закладка №2</label>
           
           <div class="content">
               <p>Содержание закладки №2</p>
               
               <img src="http://placekitten.com/200/100">
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Закладка №3</label>
         
           <div class="content">
               <p>Содержание закладки №3</p>
               
               <img src="http://placedog.com/200/100">
           </div> 
       </div>
        
    </div>
    
    <p>Чушь на искусственном языке латыни. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    
    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-2" checked>
           <label for="tab-4">Закладка №1</label>
           
           <div class="content">
               <p>Содержание закладки №1</p>
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-5" name="tab-group-2">
           <label for="tab-5">Закладка №2</label>
           
           <div class="content">
               <p>Содержание закладки №2</p>
               
               <img src="http://placebear.com/200/100">
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-6" name="tab-group-2">
           <label for="tab-6">Закладка №3</label>
         
           <div class="content">
              Ничего себе, куды вы добрались!
           </div> 
       </div>
        
    </div>
    
    </div>
    
</body>
 
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
* {
  margin: 0;
  padding: 0;
}
body {
    background: #999;  
}
#page-wrap {
  width: 960px; 
  margin: 100px auto;
}
Взято с http://ruseller.com/lessons.php?rub=2&id=1226

Проблема в том, что высота div content чем-то ограничена, и большое содержимое туда не влезает.
Как можно сделать высоту div блока по содержимому или хотя бы как-то отрегулировать?
Спасибо.
Миниатюры
Высота div блока  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
15.11.2013, 12:34
Ответы с готовыми решениями:

Высота div-блока
Есть некий родительский div-блок, в котором размещены разные элементы, а внизу его размещен дочерний div-блок. Высота родительского блока...

Высота div блока
В коде html страницы вставляю div с картинкой и задаю высоту картинки 250px: &lt;div id=&quot;banner&quot;&gt; &lt;img...

Высота внешнего блока div
Всем доброго утра :) Уважаемые web-программисты, такой вот вопрос: Есть блок &lt;div id=&quot;block-slide-image&quot;&gt; ...

1
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
16.11.2013, 10:14
ds987, если я правильно помню - для этого варианта - никак. Ищите другой. Было где-то.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
16.11.2013, 10:14
Помогаю со студенческими работами здесь

Высота блока div в зависимости от высоты внутренних tabs
Здравствуйте, уважаемые форумчане! Подскажите пожалуйста юному падавану, как задать автоматическое увеличение блока div от размера его...

Высота блока равная размеру фоновой картинки блока
Здравствуйте. Дано: &lt;nav&gt; &lt;a href=&quot;litolin.html&quot; id=&quot;litolin-link&quot; class=&quot;navi&quot;&gt; ...

Высота блока по высоте блока, следующего за ним
Здравствуйте, существует такая конструкция: &lt;div class=&quot;transparency&quot;&gt; &lt;!-- Это полу-прозрачный блок--&gt; &lt;/div&gt; &lt;div...

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу текст разместить в левой части шапки с...

Как в div загружать страницы из другого блока div?
Здравствуйте. Кто сможет помочь мне в одном вопросе? Как можно загрузить по ссылке страницу из одного блока div в другой блок..то есть...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка 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 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru