Javascript 使HTML元素填充页面的其余部分
我有下面的HTMLJavascript 使HTML元素填充页面的其余部分,javascript,html,css,highcharts,Javascript,Html,Css,Highcharts,我有下面的HTML <body> <nav>..</nav> <div class='container'> <div class='row' id='header'> ... </div> <div class='row' id='content'> ... </div>
<body>
<nav>..</nav>
<div class='container'>
<div class='row' id='header'>
...
</div>
<div class='row' id='content'>
...
</div>
</div>
</body>
..
...
...
标题保持恒定的高度，而内容则填充页面的其余部分（我在其中有一个高度图表）。我试着使用这里的信息：这里：这里-但没有运气
我的基本理解是，我将身体高度设置为100%
，将标题高度设置为25%，将内容设置为75%
。nav
是否让人困惑
请注意，我使用的是Bootstrap 3。您可以使用视口百分比。请参见
相关线路：
#header
{
height: 25vh;
...
}
#content
{
height:75vh;
...
}
在这种情况下，您不必设置正文高度、html等。如果您希望它在不填充的情况下填充页面，您可以添加：
body
{
padding:0px;
margin:0px;
}
见支持
有关更多详细信息，请参阅
对于nav
元素，您需要按照其他答案中的建议将其绝对定位，或者为nav放弃部分页面。例如，制作内容
高度65vh
和nav
高度10vh
你需要设置为100%高度的不仅仅是身体
，而是这两行的父母。所以在您的例子中，html，body，.container
html, body {
height: 100%;
}
body > .container {
height: 100%;
}
nav {
position: absolute;
top: 50px;
}
#header {
height: 25%;
background: yellow;
}
#content {
height: 75%;
background: red;
}
如果您没有将nav
设置为绝对定位，那么当它向下推内容并使总高度超过100%时，将导致滚动条
那
应该去哪里？我的意思是，如果标题是25%，内容是75%，你希望导航适合哪里？