垂直div扩展w / o固定高度 [英] Vertical div expansion w/o fixed heights
问题描述
在你滚动你的眼睛和移动，我知道如何解决这个问题，使用固定的高度和绝对定位与顶部：和底部，但我想解决它，而不使用固定的高度。我想更多地了解CSS，所以我试图解决这个不同的方式。
我已经设置了一个典型的navbar运行在顶部，然后滚动内容div。
但是！如何在不使用绝对坐标的情况下将底部滚动div容器适合剩余空间？我不能做位置：绝对，因为那时我需要知道导航条的高度设置顶部：。我不能做底部：0，因为我必须指定一个高度。
这里是JS filddle：
http://jsfiddle.net/8dugffz4/1/
感兴趣的类是.result。我目前有固定的高度，我不想。
谢谢，y'all。
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和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'>&＃9665;< / div>
< div class ='pager'> 1< / div>
< div class ='pager fliph'>&＃9665;< / 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>
display：table ，并且可以实际达到流体高度：
http://jsfiddle.net/8dugffz4/8/
和一个简约的代码段，如果你想明确地看到什么did：
* {margin：0; padding：0;} html，body {height：100％;}＃table {display：table;高度：100％; width：100％;}＃table> div {display：table-row;}＃navbar {height：45px; opacity：.5;}＃navbar> div {height：100％; background：black;}＃results {height：100％;}＃results> div {height：100％; overflow：auto; background：green;}
< div id =table > < div id =navbar> < div>< / div> < / div> < div id =results> < div>< / div> < / div>< / div>
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all. 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>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
这篇关于垂直div扩展w / o固定高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
