How to configure a child div to display scrollbars only when a parent div percentage settings require it
I am dealing with a pretty standard (or so I thought) page. What I would like to do is allow the page to have it's width determined by the <body> tag and a top level .page style that I've defined in my css. My site has a left navigation pane that is ALWAYS a certain width. The "content" area stretches with the page and should determined by the remaining space that consumes the users screen.
I'd like to show scrollbars on 开发者_如何学Pythoncontent that does not "keep the peace" with my floating area width. For example, I've recently come upon a series of sub elements that need scrollbars displayed to keep the page from stretching off into eternity.
Here is a simple image of how things look when scrollbars aren't needed:
Here is what it looks like when my sub content is wider than the page:
What I'd like to do is show scrollbars on the red sections when they fulfill their allowed space (including margins and padding). I would like for everything to be padded nicely against the blue section so that the yellow and white sections don't get overlapped.
I've attached the html that I used to make up this display, because I couldn't think of a better way to describe my approach:
<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>
Is what I'm trying to do even possible without using javascript?
Thanks in advance for any insight...
Adding to your table a table-layout: fixed styling should achieve what I believe you are wanting. Add it either inline (like you are already doing) or as part of your css (what I would consider the better way).
Explanation: Your issue resides in the fact that the div is in a table, which by default a table cell expands to fit its content. Setting the table so that it remains a fixed size by using the table-layout property prevents the table from increasing size. Of course, the scroll bar that comes from it will actually be on the table, not the div.
加载中,请稍侯......
精彩评论