Html 垂直分区扩展，无固定高度_Html_Css

Html 垂直分区扩展，无固定高度

html css

Html 垂直分区扩展，无固定高度,html,css,Html,Css,在你翻白眼继续之前，我知道如何通过使用固定高度和绝对定位（顶部：和底部：）来解决这个问题，但我想在不使用固定高度的情况下解决这个问题。我想学习更多关于CSS的知识，所以我尝试用不同的方法来解决这个问题我已经设置了一个典型的导航栏，在顶部运行，然后在下面设置了一个滚动内容div 然而！在不使用绝对坐标的情况下，如何使底部滚动div容器适合剩余空间？我不能做position:absolute，因为我需要知道导航栏的高度才能设置“top:”。我不能做“底部：0”，因为我必须指定一个高度以下是JS

在你翻白眼继续之前，我知道如何通过使用固定高度和绝对定位（顶部：和底部：）来解决这个问题，但我想在不使用固定高度的情况下解决这个问题。我想学习更多关于CSS的知识，所以我尝试用不同的方法来解决这个问题

我已经设置了一个典型的导航栏，在顶部运行，然后在下面设置了一个滚动内容div

然而！在不使用绝对坐标的情况下，如何使底部滚动div容器适合剩余空间？我不能做position:absolute，因为我需要知道导航栏的高度才能设置“top:”。我不能做“底部：0”，因为我必须指定一个高度

以下是JS filddle：

兴趣类别为“.result”。我现在有固定的高度，这是我不想要的

谢谢大家。 PT

CSS:

HTML:


◁
1.
◁
第1行
第2行
第3行
第4行

如果您只是在寻找

位置：绝对

方法的替代方法，您可以使用

高度：100%

方法：

html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }

类似于这样：

这里有一个解决方案，它使用了

显示：表格

，并且实际上可以达到流体高度：

还有一个简单的片段，以防你想看到我具体做了什么：

*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
#桌子{
显示：表格；
身高：100%；
宽度：100%；
}
#表>分区{
显示：表格行；
}
#导航栏{
高度：45px；
不透明度：.5；
}
#导航栏>分区{
身高：100%；
背景：黑色；
}
#结果{
身高：100%；
}
#结果>div{
身高：100%；
溢出：自动；
背景：绿色；
}

我很确定使用css是不可能的。除非使用固定高度。啊，但是这个需要将导航条的高度固定到45px。这就是我想要避免的！我希望navBar div适合其内容。然而，盒子大小对我来说是新的，所以我会玩这个。谢谢。我只将导航栏的高度设置为占位符-请注意，如果删除“高度”属性，您的导航栏将根据其中的内容调整其高度。不幸的是，如果您尝试向#结果添加内容，直到内容溢出，您将看到导航栏从页面上滚动。即使你添加了

#result div{overflow:scroll；}

整个页面都会滚动，而不是内容。在这里-我添加了

overflow:auto

到

。results>div

并使用我的

显示：table

和

显示：table row

技术让你原来的小提琴工作起来：谢谢你，这是个好把戏。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>

html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }