Html 查看站点的设置

给出响应站点的以下布局：

给定一个位置固定的标题（4rem），我如何设置我的主容器（C&D）仅允许最大高度为100%，并根据C或D中内容的总体高度独立滚动

您可以在此处查看我目前的演示：

如果您添加此选项会怎么样

.main视图{
高度：100vh；
溢出：隐藏；
}
.sidebar包装，.main内容包装{
高度：100vh；
溢出y：滚动；
}

这有帮助吗

//导入样式表
导入“/style.css”；
//编写Javascript代码
.header{
宽度：100%；
}
.容器液体{
显示器：flex；
弯曲方向：立柱；
柔性生长：1；
高度：100vh；
宽度：100vw；
溢出：隐藏；
}
.h-4r{
身高：4rem；
}
.h-100{
身高：100%；
}
.菜单标题{
位置：固定；
排名：0；
左:15 ;；
宽度：100%；
z指数：2；
}
.菜单标题名称{
背景色：rgba（0,0,0,0.25）；
宽度：100%；
文本对齐：居中；
}
.菜单标题{
背景色：rgba（0,0,0,0.25）；
宽度：100%；
文本对齐：居中；
}
.主视图{
显示器：flex；
柔性生长：1；
垫顶：4rem；
溢出：隐藏；
最大高度：100%；
高度：100vh；
溢出y：滚动；
}
.侧边栏包装{
/*溢出y：滚动*/
}
.侧边栏{
页边顶部：1rem；
高度：110vh；
背景色：rgba（0,0,0,0.25）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.主要内容包装{
/*溢出y：滚动*/
}
.主要内容{
页边顶部：1rem；
高度：100vh；
背景色：rgba（0,0,0,0.25）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

A.
B
C
D
基本思想是

设置最外层元素的高度
将内部元素的高度设置为100%
将自动溢出设置为要根据内容独立滚动的元素


布局如下所示：


A.
B
C
D



要设置最外层元素的高度，我有如下样式：

$header-height: 4rem;

header {
    height: $header-height;
}

main {
    height: calc(100vh - #{$header-height});
}

请参阅，标题设置为4rem，主视图设置为100%视图高度减去4rem



然后我在几个地方使用Bootstrap的内置类
.h-100
，以确保其中的内部元素占据100%的高度



最后，您只需要在C和D上设置自动溢出。我也在使用Bootstrap内置类
。溢出自动







演示：
只需将这两个代码复制并粘贴（替换）到您发布的stackblitz.com（我也在那里进行了测试），然后告诉我这是否是您想要的

你的css

html, body {
  height:100%;
}
.header {
  width: 100%;
}
.container-fluid {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
.h-4r {
  height: 4rem;
}
.h-100 {
  height: 100%;
}
.menu-header {
  flex: 0 1 auto;
}
.menu-header-name {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  text-align: center;
}
.menu-header-title {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  text-align: center;
}
.main-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
}
.sidebar {
  height: 110%;
  background-color: rgba(0, 0, 0, 0.25);
}
.main-content {
  background-color: rgba(0, 0, 0, 0.25);
  height: 110%;
}
.sidebar-wrapper,
.main-content-wrapper {
  flex: 1 1 auto;
  overflow-y: scroll;
  padding-top:15px;
  padding-bottom:15px;
}

还有你的html

<div id="app">

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>

<div class="container-fluid">
    <div class="row menu-header">
        <div class="d-flex col-3 h-4r align-items-center justify-content-center" style="background-color: #FF6D6E">
            <div class="menu-header-name">A</div>
        </div>
        <div class="d-flex col-9 h-4r align-items-center justify-content-center" style="background-color: #8F8EEC">
            <div class="menu-header-title">B</div>
        </div>
    </div>

    <div class="row main-view">
        <div class="col-3 sidebar-wrapper" style="background-color: #7EE987">
            <div class="sidebar">C</div>
        </div>

        <div class="col-9 main-content-wrapper" style="background-color: #FDCE72">
            <div class="main-content">D</div>
        </div>
    </div>
</div>


A.
B
C
D
这样做，滚动条不会在底部显示所有内容。它被切断。运行代码会产生
语法错误：导入声明可能只出现在模块的顶层
，为什么要导入样式表？只能导入另一个javascript模块。我复制了css并将其粘贴到stackblitz中，但这不起作用。使用css，整个主视图部分将一起滚动。这两个C&D部分必须彼此独立滚动，因为它们可以有不同的内容高度。我点击了链接，C&D部分已经可以独立滚动了。你已经解决这个问题了吗？其他解决方案之一可能就是它。然而，在我的stackblitz链接中，C&D部分在底部有一个截断部分。这在Chrome上有效，但在Firefox上无效。这是唯一一个似乎在我尝试的不同浏览器中正常工作的解决方案。带有
位置的东西：修复了Firefox不喜欢的
标题，其他答案在方法上有不同的缺陷。然而，这种方法非常有效。