程序员经验分享-hwhale

固定页眉、页脚和侧边栏，滚动内容区域位于中心

2024-01-06

从这个开始演示模板 http://jsfiddle.net/kFBuD/91/，我想创建这个布局：

但我有以下问题：

  • 两个侧边栏不包含在可滚动内容 div 内。
  • 内容div不采用固定大小
  • 可滚动内容溢出时不呈现滚动条
  • 最好使用浏览器的主滚动条

有人可以帮我解决这些问题吗？


Using display:grid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

这使用了 CSS 的几个新功能，您选择的浏览器可能支持也可能不支持这些新功能。这些包括网格布局 https://caniuse.com/#feat=css-grid, CSS 变量 https://caniuse.com/#feat=css-variables, and position:sticky https://caniuse.com/#feat=css-sticky。 CSS 变量可以通过静态值和 Grid/ 来解决position:sticky可以优雅地降解@supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports.

/* Remove unnecessary margins/padding */
html, body { margin: 0; padding: 0 }

.wrapper {
  display: grid;
  /* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
  grid-template-areas:
    "header header header header header"
    "empty_left sidebar_1 content sidebar_2 empty_right"
    "footer footer footer footer footer";
  /* Only expand middle section vertically (content and sidebars) */
  grid-template-rows: 0fr 1fr 0fr;
  /* 100% width, but static widths for content and sidebars */
  grid-template-columns: 1fr 100px 400px 100px 1fr;
  /* Force grid to be at least the height of the screen */
  min-height: 100vh;
}
.header {
  grid-area: header;

  /* Stick header to top of grid */
  position: sticky;
  top: 0;
  /* Ensure header appears on top of content/sidebars */
  z-index: 1;

  /* General appearance */
  background-color: #FCFF34;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem;
}
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */
:root {
  --header-height: calc(1rem * 1.5 + 1rem * 2);
}

.sidebar-1 {
  grid-area: sidebar_1;
}
.sidebar-2 {
  grid-area: sidebar_2;
}
.sidebar-1,
.sidebar-2 {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;

  /* Styling to match reference */
  background-color: #BC514F;
}

.content {
  grid-area: content;

  /* General appearance */
  background-color: #99BB5E;
}
.footer {
  grid-area: footer;

  /* Stick footer to bottom of grid */
  position: sticky;
  bottom: 0;

  /* General appearance */
  background-color: #FCFF34;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  padding: .5rem;
}
/* Save footer height to properly set `bottom` and `min-height` for sticky content */
:root {
  --footer-height: calc(.8rem * 1.5 + .5rem * 2);
}

.sticky-spacer {
  flex-grow: 1;
}
.sticky-content {
  position: sticky;
  bottom: var(--footer-height);
  min-height: calc(100vh - var(--footer-height));
  box-sizing: border-box;

  --padding: 10px;
  padding:
    calc(var(--header-height) + var(--padding))
    var(--padding)
    var(--padding);
  margin-top: calc(0px - var(--header-height));
}
<div class="wrapper">
<div class="header">Header (Absolute)</div>
<div class="sidebar-1">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
</div>
<div class="content">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">
    Scrollable content<br><br>
    line 1<br><br>
    line 2<br><br>
    line 3<br><br>
    line 4<br><br>
    line 5<br><br>
    line 6<br><br>
    line 7<br><br>
    line 8<br><br>
    line 9<br><br>
    line 10<br><br>
    line 11<br><br>
    line 12<br><br>
    line 13<br><br>
    line 14<br><br>
    line 15<br><br>
    line 16<br><br>
    line 17<br><br>
    line 18<br><br>
    line 19<br><br>
    line 20
  </div>
</div>
<div class="sidebar-2">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">
    Sidebar 2 Absolute position, Fixed width<br><br>
  line 1<br><br>
  line 2<br><br>
  line 3<br><br>
  line 4<br><br>
  line 5<br><br>
  line 6<br><br>
  line 7<br><br>
  line 8<br><br>
  line 9<br><br>
  line 10
  </div>
</div>
<div class="footer">Footer (Absolute)</div>
</div>

主要内容容器中的滚动条

内容框（包括侧边栏）可以设置为任何类型的宽度（百分比、像素等）。只有可滚动内容区域才会滚动（侧边栏/页脚/页眉只会溢出框）。我建议添加一些媒体查询来突破侧边栏，这样内容就不会隐藏在较小的设备上，或者设置min-height在内容框上和min-width on the body.

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    opacity:.8;
}

.content {
    position:relative;
    height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: red;
    top:60px;
    bottom:30px;
    width: 100px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    left:0;
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    background:green;
    height: 100%;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

使用浏览器的主滚动条

虽然可以使用浏览器的主滚动条，但它也会导致侧边栏随页面滚动。

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    z-index:100;
}

.content {
    position:relative;
    min-height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
}

.sidebar1, .sidebar2 {
    background: red;
    height:100%;
    width: 100px;
    top:0;
    padding-top:60px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    
    left:0;
    
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    height:100%;
    background:green;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

固定页眉、页脚和侧边栏，滚动内容区域位于中心 的相关文章

随机推荐

  • 谷歌地图图像？

    有什么办法可以捕捉谷歌地图的图像吗 我无法使用静态地图 因为我在地图中有自己的折线 并且我希望它们出现在 屏幕截图 中 基本上 我希望用户导航地图 添加一些折线 当他单击 保存 时 我将保存线条 坐标 缩放 但我还希望有一个图像在列表中以缩

  • 删除 Service Fabric 应用程序后进程仍继续运行

    当我删除服务结构应用程序时 我已经看到了这一点 应用程序内服务的旧进程仍然继续运行 应用程序中包含的服务有以下类型 Actors 无状态服务 ASP NET 核心 当我重新部署应用程序时 我注意到了这个问题 并且 ASP NET Core

  • 如何使用 VSTS 2008 Database Edition GDR 版本编辑数据库对象的默认模板

    我正在尝试使用 Visual Studio Team System 2008 数据库版 GDR 版本 来完成我正在开发的一个新项目 并且遇到了一个有点烦人的问题 我希望有人知道如何解决该问题 简而言之 我想更改用于生成数据库对象 特别是存储

  • 使用 FireDac (Delphi) 在 Firebird 中创建数据库

    我最近从 AnyDac 更改为 FireDac 8 0 5 3365 我们正在运行 Delphi 2006 当我使用该组件的 AnyDac 版本时 我可以通过执行以下操作来创建一个新数据库 设置我的连接 fConnection LoginP

  • 在 C# 应用程序中管理多个 Windows 窗体

    关于管理具有多种形式的应用程序的好方法的任何想法 建议 模式 第一个页面是登录 加载 主表单 用户可以从那里启动许多其他 子表单 可能会随着时间的推移而增长 用户应该能够随时取消整个应用程序 我知道我现在做事的方式并不总是优雅的 Cody

  • 使用 git/github 对 R 包进行版本控制？

    我在确定更新 github 上 R 包版本号的工作流程时遇到问题 以避免错误命名 中间 版本 这就是我现在所做的 提交并推送 例如版本 1 0 0 并将发行版设置为 1 0 0 提交并推送一些错误修复等 而不更改描述文件 最终决定我应该将版

  • git pull 实际上并没有从远程恢复我丢失的文件

    我一直在一个分支机构工作 我提交并将其推送到远程存储库 现在该分支上的一些文件丢失了 希望它们在远程分支上仍然可用 所以我尝试这样做git pull git pull origin feature my branch 然而 git表示所有内

  • Objective C - 隐藏 iVar

    这是我的问题 假设我有一个名为 WebServiceBase h 的类 我需要在该类中添加一个名为 NSString requestData 的 iVar 但我不需要将该 iVar 添加到头文件中并使其对外部人员可见 如果我将其作为类库分发

  • SQL在分割字符串后将数据插入到其他表中

    我有一张桌子WCA ID TYPE 1 1 3 5 2 1 5 现在我想将数据移动到新表WCA TYPE ID WCA ID TYPE 1 1 1 2 1 3 3 1 5 4 2 1 5 2 5 这里的ID是自动增加的 如何在 MS SQL

  • 数据更改时 LiveData 不更新

    我正在使用 LiveData 从服务器获取数据并观察它 我的onChanged 方法只在第一次被调用 当服务器中的数据更新时不会被调用 用户片段 UserViewModel userViewModel ViewModelProviders

  • 如何向 QMainWindow 添加背景图像？

    大家好 我是 QT 创建者的新手 我尝试了很多方法来设置 Q 主窗口的背景图像 我添加了一个带有图像的资源文件夹 我尝试在 UI 中使用 setstylesheet 添加并尝试对其进行编码 当我使用用户界面时 我可以看到图像 但当我运行它时

  • 具有多个命名空间的 VBA SelectSingleNode xpath

    我遇到了与其他人类似的问题 尝试通过具有两个命名空间的 XML 使用 xPath 进行搜索 但仍在查看其他主题 但它似乎不起作用 XML

  • 更新一类中的多个项目，而不仅仅是一个

    在此代码的更新部分中 只有第一个制作的蝙蝠受到 Bat 类中 update 的影响 主循环之外 START BAT COUNT 30 BAT IMAGE PATH os path join Sprites Bat enemy Bat 1 p

  • Kubernetes - 如果容器无法重新触发初始化容器，则强制 pod 重新启动

    我在我的 pod 中发现 如果容器因存活探针失败而失败或被终止 容器会重新启动 但 pod 不会 这意味着initContainers在容器崩溃的情况下不会再次运行 就我而言 我确实需要运行其中之一initContainers每次主容器失败

  • 我应该用什么来替换 hibernate 已弃用的 @TypeDef 和 @Type 注释？

    我刚刚将 Hibernate 使用的版本升级到 5 6 1 现在似乎弃用了一些与类型相关的注释 TypeDef name json typeClass JsonBinaryType class Type type json 我没有找到任何关

  • 使用 Inno Setup 安装隐藏文件

    我需要使用 Inno Setup 创建的安装程序在最终用户计算机上安装一组跨越多个文件夹的隐藏文件 我已经提到过在 Inno Setup 中复制隐藏文件 https stackoverflow com questions 34050206

  • 游戏中心与 Sprite Kit 集成？

    如何将 Game Center 或 GameKit Framework 与 Sprite Kit Xcode 模板结合使用 在Sprite套件中 它使用Scenes 但通常要查看排行榜 例如您需要 presentModalViewContr

  • 解决 C++ 对临时变量的非常量引用的限制

    我有一个 C 数据结构 它是其他计算所需的 暂存器 它的寿命不长 并且不经常使用 因此对性能不是至关重要的 然而 它在其他可更新的跟踪字段中包括一个随机数生成器 虽然生成器的实际值并不重要 但它is重要的是该值被更新而不是复制和重用 这意味

  • 如何使用 Google Plus 登录让用户登录 Firebase

    我喜欢在 FireBase 中使用 Google 加号进行身份验证 Google Plus 的signinCallback 返回一个auth 对象 如何使用此信息让我的用户安全登录 FireBase Auth auth 对象如下所示 acc

  • 固定页眉、页脚和侧边栏，滚动内容区域位于中心

    从这个开始演示模板 http jsfiddle net kFBuD 91 我想创建这个布局 但我有以下问题 两个侧边栏不包含在可滚动内容 div 内 内容div不采用固定大小 可滚动内容溢出时不呈现滚动条 最好使用浏览器的主滚动条 有人可以

热门标签