Html 需要特定CSS div布局的帮助吗

我已经摆弄这个有一段时间了，不能得到我想要的。有人能给我一些指导来实现附图中的布局吗

---

这是我为你准备的。它使用了flexbox，这是@Keith M的建议（也是一个很好的建议，我也推荐flexbox）

希望它能让你上路

.body{
显示器：flex；
弯曲方向：立柱；
宽度：100vw；
高度：100vh；
}
.body>.topNav{
flex:050px；
背景：蓝色；
}
.body>.page{
显示器：flex；
弯曲方向：行；
flex:1自动；
}
.body>.page>.leftNav{
flex:0300px；
背景：红色；
}
.body>.page>.content{
flex:1自动；
}

想发布你的HTML或CSS吗？看看flexbox，它会让这一切变得非常简单。你至少可以自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回代码并解释您尝试了什么。也就是说，我不会给您完整的答案，因为完成此任务应该是一次很好的学习体验：-）。如果你有问题就问吧！感谢您让我踏上使用flexbox的道路。不久前我读到过关于他们的文章，但我没有想到要走这条路。因此，我创建了一个新的HTML文件来简化事情，并尝试使用flexbox。我想它在我意识到我应该嵌套元素后点击了，至少我认为这是应该采取的路线。我有几个问题（我创建了一个JSFIDLE）。首先，为什么搜索栏div的颜色没有显示出来？第二，如何使Content/SavedSearches的高度达到其父级的100%？由于css中的错误，搜索栏颜色无法显示。你写了“背景：绿色：”应该改为“背景：绿色；”。例如，不要混淆分号和冒号：-）其次，内容/保存搜索的高度是其父搜索的100%。。。问题是父底部行没有占用其可用的其余空间。我的建议是在MainCol上使用

display:flex

和

flex-direction:column

来填充整个空间。此外，如果您没有使用DOM检查器（Chrome和IE中的F12），那么就可以非常容易地找出为什么事情没有达到您预期的大小。我通常从给我带来麻烦的孩子开始，然后走到树上。通常，如果我认为孩子的代码是正确的，那就是某位家长把我搞砸了（类似于你和BottomRow）。