Я имею дело с довольно стандартной (или я так думал) страницей.Я хотел бы, чтобы ширина страницы определялась тегом <body> и стилем верхнего уровня .page, который я определил в моей CSS.Мой сайт имеет левую панель навигации, которая ВСЕГДА определенной ширины.Область «контента» растягивается вместе со страницей и должна определяться оставшимся пространством, которое занимает экран пользователя.
Я хотел бы показать полосы прокрутки на контенте, который не "сохраняет мир" с моей шириной плавающей области.Например, недавно я натолкнулся на ряд подэлементов, для которых нужны полосы прокрутки, чтобы страница не растягивалась в вечность.
Вот простое изображение того, как все выглядит, когда полосы прокрутки не нужны:
Вот как это выглядит, когда мой суб-контент шире, чем страница: 
Что я хотел бы сделать, это показать полосы прокрутки на красных секциях, когда онивыполнить их разрешенное пространство (включая поля и отступы).Я хотел бы, чтобы все было хорошо дополнено синей частью, чтобы желтая и белая части не перекрывались.
Я приложил HTML, который использовал для создания этого экрана, потому что я не могНе думаю, что лучший способ описать мой подход:
<html>
<head>
<style type="text/css">
body
{
background-color: gray;
}
.page /* page is always centered on screen */
{
background-color: white;
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.nav-pane /* navigation pane is always 100px */
{
width: 100px;
height: 100%;
background-color: green;
}
.nav-pane > div
{
width: 100px;
}
.content-pane /* content pane should size with page */
{
background-color: yellow;
margin: 10px;
}
.content-pane > div /* !!! SHOULD NOT STRETCH !!! */
{
position: relative;
overflow: auto;
background-color: blue;
padding: 10px;
margin: 10px;
color: white;
}
.content-pane > div > *
{
clear: both;
}
.content /* content div holds tables, images, paragraphs, etc.. */
{
background-color: red;
float: left;
margin-bottom: 20px;
}
#small /* one is small */
{
width: 200px;
}
#big /* one is BIG! */
{
width: 4000px;
}
</style>
</head>
<body>
<div class="page">
<table width="100%" style="border: solid black">
<tr>
<td class="nav-pane">
<div>
I am the nav-pane
</div>
</td>
<td class="content-pane">
<div>
I am the content pane
<h2>I am a heading</h2>
<div class="content">
<div id="small">Scrollbar not needed</div>
</div>
<h2>I too am a heading</h2>
<div class="content">
<div id="big">I require a scroll bar to keep this page pretty... :(</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Возможно ли то, что я пытаюсь сделать, даже без использования javascript?
Заранее спасибо за любую информацию ...