Внутренний div превышает внешние границы div
Я не могу заставить внутренний div (с Hello World) поместиться внутри div "box" в этом примере кода (также в http://www.toad-software.com/test.html).
Несмотря на то, что body установлено на 100%, внутренний div не будет содержаться! Это тестовый пример для более крупного проекта, в котором таблица переменной ширины превышает границы своего контейнера. Таблица будет во внутреннем div, а контейнер - в «box».
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type = "text/css">
/*html { width: 100%; height: 100%; position: relative; background: #c0c0c0; }
body { position: absolute; width: 100%; height: 100%; background: #f9f9f9; }*/
body,
html
{
margin: 0;
padding: 0;
}
body
{
width: 100%;
}
div.box
{
padding: 10px;
background: #ff33ff;
}
</style>
</head>
<body>
<div class = "box">
<div style = "width: 1500px; height: 900px; background: #f12;">Hello World</div>
</div>
</body>
</html>
Ответы 2
добавить overflow:hidden; в контейнер <div>
100% ширина элемента body относится к порту просмотра, поэтому цвет фона сокращается при прокрутке. Либо установите ширину тела 1520 пикселей, чтобы охватить содержащийся div, либо добавьте еще один div и выполните следующие действия:
div.box { width: 100px; overflow: auto; }
Однако, как предупреждение, движение по пути горизонтальной прокрутки - плохая идея для первого проекта на CSS и с точки зрения взаимодействия с пользователем.
Цель - увеличить содержащий div или сжать содержащийся div?