I am currently working on a three-column layout that spans 100% width and height of the browser window with padding. Within this layout, there are two columns that also occupy 100% height and should be able to scroll independently.
For reference, you can view the layout in this jsfiddle link: http://jsfiddle.net/KdZ9A/2/. It functions as intended in Chrome, with individual column scrolling:
However, in Firefox and IE (Internet Explorer), the behavior is not ideal as the entire page scrolls instead of just the individual columns. My goal is to have only the columns overflow and scroll without affecting the body. Any suggestions on how to resolve this issue for Firefox and IE compatibility?
In an attempt to address the problem, I experimented with a slightly different approach using absolute positioning for the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Below is the HTML code snippet I am currently using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
To achieve 100% height, I utilized absolute positioning combined with table and table-cell display properties within the columns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}