Html 固定了容器左侧的div，使用CSS的容器（但不是页面）的全高_Html_Css_Layout

Html 固定了容器左侧的div，使用CSS的容器（但不是页面）的全高

html css layout

Html 固定了容器左侧的div，使用CSS的容器（但不是页面）的全高,html,css,layout,Html,Css,Layout,我希望我的页面具有以下布局：页眉和页脚始终可见。灰色区域是一个物品标签。绿色和深红色区域都位于导航标签内。深红色有一个固定的宽度，将用作调整绿色导航面板大小的手柄。当然，它将非常窄，我将使用JavaScript来调整大小。灰色和绿色区域都必须有自己的滚动条这就是HTML： <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>CSS template</titl

我希望我的页面具有以下布局：

页眉和页脚始终可见。灰色区域是一个物品标签。绿色和深红色区域都位于导航标签内。深红色有一个固定的宽度，将用作调整绿色导航面板大小的手柄。当然，它将非常窄，我将使用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实现所需的布局呢？

在导航中将方向设置为row的情况下添加flex：

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

试着写：

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

这样地？“是的，”迈克尔科，当然！这就是我们复制解决方案而不是彻底学习CSS所得到的结果。非常感谢。弯曲方向似乎没有必要。非常感谢。我忘记了默认情况下“弯曲方向”是“行”。我删除了它。我试过了，但是页脚从页面上消失了。

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