Instead of resorting to fixed heights and absolute positioning with top: and bottom:, I'm challenging myself to find a CSS solution without using those methods. I want to explore different ways to solve this problem and enhance my skills.
I have a standard navbar at the top and a scrolling content div below it.
The challenge is fitting the bottom scrolling div container into the remaining space without relying on absolute coordinates. Using position: absolute won't work because that requires knowing the height of the navbar for top:. And setting "bottom: 0" would mean specifying a fixed height, which we want to avoid.
You can view the JSFiddle here:
http://jsfiddle.net/8dugffz4/1/
The specified class is ".result". Currently, the height is fixed, but I'm aiming to make it dynamic.
Thank you. PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>