Question

我想在页面中使用以下布局：

页眉和页脚始终可见。灰色区域是article标记。绿色和深红色区域都在nav标记内。暗红色具有固定的宽度，并将用作调整绿色导航面板大小的手柄（当然，它将非常窄，我将使用JavaScript进行调整大小）。灰色和绿色区域都必须有自己的滚动条。

这就是HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>CSS template</title>
</head>
<body>
<header>Header</header>
<main>
<nav>
    <div class='navcont'>
        <p>nav1</p>
        <p>nav2 with longer line just to make sure if everything is working as intended</p>
    </div>
    <div class='handle'>Handle</div>
</nav>
<article>
    <p>Article</p>
</article>
</main>
<footer>Footer</footer>
</body>
</html>

这就是CSS：

html, body {
    height:100%;
    margin:0;
}
body {
    display:flex;
    flex-direction:column;
}
header {
    text-align:center;
}
main {
    flex:1;
    display:flex;
    min-height:0;
}
article {
    background:#C0C0C0;
    width:80%;
    overflow:auto;
    padding:10px;
}
nav {
    width:20%;
    height:auto;
    overflow:hidden;
}
.navcont {
    background:#00FF00;
    width:auto;
}
.handle {
    background:#800000;
    float:right;
    width:30px;
}
footer {
    text-align:center;
}

一个正在运行的例子：https://jsfiddle.net/etwphhc8/

我尝试了很多不同的解决方案，来自这里的许多不同的问题/答案，但仍然没有按预期工作。那么，如何使用CSS实现所需的布局？

Answer 1

添加flex，方向设置为nav中的行：

nav {
  width:20%;
  height:auto;
  overflow:hidden;
  display:flex;
}

Answer 2

尝试写：

  .navcont {
      background:#00FF00;
      width:auto;
      height: 100%;
}

使用CSS固定容器左侧的div，容器的整个高度（但不是页面的高度）

2 个答案: