我正在制作一个布局，顶部有一个垂直标题，宽度为浏览器窗口的100％，低于两列。左侧的侧边栏和主列都应覆盖窗口的其余部分。
以下是问题： 如果标题的高度为45px，侧边栏的高度为100％，则高度将为（100％+ 45px），这意味着整个侧面大于浏览器窗口。我怎么解决这个问题？
最后我希望能够单独输入代码，在主视图和视线栏中滚动，标题应固定在顶部。
以下是一个小例子：Plunkr
* {
margin: 0;
padding: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
}
html, body, #wrapper, #main {
width: 100%;
height: 100%;
}
header, #main {
width: 100%;
}
/* Header */
header {
height: 45px;
background-color: green;
}
header div {
float: left;
}
header #right {
float: right;
}
/* Main */
#main section {
float: left;
}
#main #sidebar {
background-color: red;
width: 190px;
height: 100%;
}
#main #content {
background-color: yellow;
height: 100%;
}<html>
<head>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="main">
<section id="sidebar">
Sidebar
</section> <!-- #sidebar -->
<section id="content">
Content
</section> <!-- #content -->
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>
我希望你能帮助我
答案 0 :(得分：0)
保持header修复将解决此问题。将position: fixed添加到header即可。
让我知道你对此的看法。谢谢！
修改
将此添加到sidebar和content：
height: calc(100% - 45px);
padding-top: 45px;
* {
margin: 0;
padding: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
}
html, body, #wrapper, #main {
width: 100%;
height: 100%;
}
header, #main {
width: 100%;
}
/* Header */
header {
height: 45px;
background-color: green;
position: fixed;
}
header div {
float: left;
}
header #right {
float: right;
}
/* Main */
#main section {
float: left;
}
#main #sidebar {
background-color: red;
width: 190px;
height: calc(100% - 45px);
padding-top: 45px;
}
#main #content {
background-color: yellow;
height: calc(100% - 45px);
padding-top: 45px;
}<html>
<head>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<div id="main">
<section id="sidebar">
Sidebar
</section> <!-- #sidebar -->
<section id="content">
Content
</section> <!-- #content -->
</div><!-- #main -->
</div><!-- #wrapper -->
</body>
</html>