У меня есть div с позицией: fixed, который является моим контейнером div для некоторых меню. Я установил его сверху: 0px, bottom: 0px, чтобы всегда заполнять область просмотра. Внутри этого div я хочу иметь еще 2 divs, нижний из которых содержит много строк и имеет переполнение: auto. Я ожидал бы, что он будет содержаться в контейнере div, но если их слишком много, он просто расширяется за пределами фиксированного div. Ниже приведен мой код и скриншот, чтобы уточнить:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyPlan</title>
<meta name="X-UA-COMPATIBLE" value="IE=8" />
<style type="text/css">
#outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;}
#innerstatic1 { width:100%; background-color:yellow; height:100px;}
#innerstatic2 { overflow:auto; background-color:red; width:100%;}
</style>
</head>
<body>
<div id="outerfixed">
<h3>OUTERFIXED</h3>
<div id="innerstatic1">
<h3>INNERSTATIC1</h3>
</div>
<div id="innerstatic2">
<h3>INNERSTATIC2</h3>
line<br />
...lots of lines
line<br />
</div>
</div>
</body>
</html>
Есть ли у меня способ сделать это? Опять же, я хочу, чтобы # innerstatic2 правильно содержался в #outerfixed и получал полосы прокрутки, если он больше, чем пространство, в котором оно находится внутри #outerfixed.
Я знаю, что есть некоторые возможности взломать это, также исправляя # innerstatic2, но мне бы очень хотелось, чтобы он находился внутри потока внутри #outerfixed, если это возможно, так что, если я буду перемещать #outerfixed где-то, появится внутренний элемент с ним.
EDIT: Я знаю, что могу установить переполнение: auto на #outerfixed и получить полосу прокрутки на всем протяжении, но я специально хочу прокрутку только на # innerstatic2, это сетка, и я хочу прокручивать только сетку.
Кто-нибудь? Возможно ли это?