Div перекрывает родительский блок

@morcano · Регистрация: 08.05.2015

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

Вот такая вот писанина:

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
<html>
<head>
<style>
*{
    margin:0;
    padding: 0;
}
html, body{
    background-color: #faf1e2;
    height: 100%;
    min-width:1082px;
}
.wrapper
{
    height: 100%;
    border:1px solid red;
}
.header
{
   width:100%;
   height:160px;
   background-color: #fff;
}   
.container{
    border:1px solid red;
    box-sizing: border-box;
    background-color: #faf1e2;
    margin: 0 auto;
    width: 1082px;
    min-height: 100%;
    padding: 0 30px 0 30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h2>header - 160 px</h2>
</div>
<div class="container">
<h2>container - 100% height</h2>
</div>
</div>
</body>
</html>

получается, что блок container вылазит за пределы блока wrapper

@Compute · 13.08.2015, 01:23

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

получается, что блок container вылазит за пределы блока wrapper

у тебя так

CSS
1
2
3
4
5
.wrapper
{
    height: 100%;
    border:1px solid red;
}

сделай так

CSS
1
2
3
4
5
.wrapper
{
    height: auto;
    border:1px solid red;
}

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

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

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

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

то есть наоборот...враппер станет по высоте как контейнер...

@morcano · 13.08.2015, 08:30 **[ТС]**

Не совсем так, я вообще хочу прижать футер к низу страницы, но у меня получается wrapper занимает область видимости страницы, а контейнер вылазит в оверфлоу из-за чего появляется вертикальный скролинг. (пример пока без самого футера)

@Fedor92 · 13.08.2015, 11:13

morcano, ну у Вас же блок container занимает 100% высоты wrapper + ещё высота header - 160px = вертикальный скроллинг... При задании высоты блоку container необходимо учитывать высоту header для того чтобы оба блока уместились во wrapper!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@morcano 0 / 0 / 0 Регистрация: 08.05.2015 Сообщений: 6
	13.08.2015, 08:30 [ТС]
	Не совсем так, я вообще хочу прижать футер к низу страницы, но у меня получается wrapper занимает область видимости страницы, а контейнер вылазит в оверфлоу из-за чего появляется вертикальный скролинг. (пример пока без самого футера) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	13.08.2015, 11:13
	morcano, ну у Вас же блок container занимает 100% высоты wrapper + ещё высота header - 160px = вертикальный скроллинг... При задании высоты блоку container необходимо учитывать высоту header для того чтобы оба блока уместились во wrapper! 0