程序员经验分享-hwhale

将“Position：fixed”div设置为与父div（flexbox项）相同的宽度

2023-12-06

如何使 NavWrapper 与父级的宽度相同？

我希望这些链接位于固定位置，即使主要部分溢出。

我知道如何在没有 Flex 的情况下做到这一点。有没有纯 CSS 的方法可以做到这一点？

body {
  padding:0;
  margin:0
}
.wrapper {
  display: flex;
}
nav { 
  flex: 1 1 150px;
  background: gray;
}
.nav-wrapper {
  width: 100%;
  position: fixed;
  top: 0; left: 0;
  display:flex;
  flex-direction: column;
}

.nav-wrapper a {
  flex: 1 1;
  border: 1px solid red;
}
section {
  flex: 5 1 500px;
  padding: 20px;
}
<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
         <a href="#">Home</a> 
         <a href="#">About</a> 
    </div>
  </nav>
  <section>
    <p>Lorem</p>
  </section>
</div>

你不需要fixed位置 - 看了下面的例子你就会明白我为什么这么说：

去除fixed定位并添加height: 100vh to nav:

nav {
  flex: 1 1 150px;
  background: gray;
  height: 100vh;
}

现在将一个部分的内容包装到一个inner定位的divabsolute像这样：

section {
  flex: 5 1 500px;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这将允许section留在100vh of the nav-wrapper并且额外的高度将会溢出。

body {
  padding: 0;
  margin: 0
}
.wrapper {
  display: flex;
}
nav {
  flex: 1 1 150px;
  background: gray;
  height: 100vh;
}
.nav-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.nav-wrapper a {
  flex: 1 1;
  border: 1px solid red;
}
section {
  flex: 5 1 500px;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <nav role="navigation">
    <div class="nav-wrapper">
      <a href="#">Home</a> 
      <a href="#">About</a> 
    </div>
  </nav>
  <section>
    <div class="inner">
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
      <p>Lorem</p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.       
    </div>
  </section>
</div>

查看此内容并让我知道您的反馈。谢谢！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

将“Position：fixed”div设置为与父div（flexbox项）相同的宽度 的相关文章

  • 使用纯javascript选择最接近id的id

    div div TEXT div div div div TEXT div div div TEXT div 如何选择最接近div1的div2 关注w3docs https www w3 org TR html4 struct global

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo

  • PHP MySQL 使用选项/选择 HTML 表单标签进行多重搜索查询

    我正在尝试使用两个搜索字段设置基本的 MySQL LIKE 搜索 我不想拥有它 所以它有多个可选搜索字段 例如if isset POST city isset POST name 我不知道如何用 HTML 来做到这一点

  • PyCharm 中有 HTML 块 {%%} 的快捷方式吗？

    我正在使用 HTML 块 例如 block content 经常使用 但必须输入括号和百分比符号很麻烦 有没有捷径或其他方法可以自动执行此操作 到目前为止我刚刚发现这个 PyCharm 中有插入 的快捷方式吗 https stackover

  • Google Maps API 下拉列表，缩放至标记

    我正在使用 Google Maps API v3 我有一个带有一些标记的简单地图 我还有一个下拉列表 我需要最少的代码来完成这项工作 我想在下拉列表中选择一个标记 并将选定的标记平移到它 我已经尝试了一切并在网上查看 我发现事情很接近 但到

  • 使用 iframe 显示静态文本内容

    我有一个非常简单的要求 我有一个 div 我在其中显示一些文本内容的标签 我想在一个中显示相同的文本内容 我想要实现的目标已写在下面 有人可以帮忙吗 b div This is a content which I want to displ

  • 如何检测浏览器是否支持自定义元素

    我正在查看 Modernizr 它应该有助于功能检测 这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容 但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素 如果不是 Modernizr 我如

  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是

  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a

  • 物化模式覆盖整个页面（模式弹出窗口未带到前台）

    由于保密原因 我无法上传 Web UI 的屏幕截图 物化模态应该表现得像here http materializecss com modals html 但不幸的是 我的网站发生的情况是 包括模式在内的整个页面都是 深色背景 的一部分 模式

  • 如何指定网站的语言？ （HTML？）

    如何指定页面采用某种语言以便搜索引擎可以理解 这是我放在顶部的元标记吗 如果是 您知道大多数搜索引擎是否使用它来确定语言吗 我已将一页英文内容转换为几种不同的语言 并希望将该信息包含在 html 中 让搜索引擎知道他们正在处理哪种语言 快速

  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li

  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba

  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录？

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触

  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到

  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 如何使用 MVC 3 和 Entity Framework Code First 建立多对多关系的 ModelBind？

    我在 MVC 3 应用程序中遇到了同样的问题 我有一个创建新产品的视图 并且该产品可以分配给一个或多个类别 这是我的 EF Code First 模型类 public class Product public int ProductID g

  • 观察者可以观察到多个可观察对象吗？

    试图找到一个这样的例子 有可能我没有采取正确的方法 或者我的思想过度简化了观察者模式的概念 我想创建一个类来控制来自 Web 服务的消息 并且我希望该类监视许多其他操作的更改 我见过的观察者模式示例表明许多观察者正在观看单个可观察的内容 我

  • 我需要获取 csv 列中的值（分组）计数

    我需要计算第一列的值 这些 ID 可能存在于我收到的任何给定 csv 文件中 也可能不存在 因此 我需要循环遍历 csv 文件 查看第一列 如果不存在 则将其添加到保持数组 PWSs 中 或者如果我已经添加了该保持数组 则增加该保持数组中的

  • OpenCV - NDK 更新后对“cv::CascadeClassifier::detectMultiScale()”的未定义引用

    昨天我将 Android Studio 包含 NDK 更新到版本17 0 4754217从那时起我就无法再运行我的应用程序了 当我尝试在更新后重新运行代码时 它给了我错误ABIs mips64 armeabi mips are not su

  • android 获取文本外观运行时

    我已经重写了 textview 类 并且我想在文本外观很小时执行一些操作 如何检查xml布局文件设置的文本外观 我找到了一个解决方法 private int getTextAppearance AttributeSet attrs int

  • 获取在 page_init 中触发回发的控制

    我有一个包含动态创建的下拉列表的网格视图 当更改下拉值并在网格上进行批量更新 btnUpdate click 时 我必须在页面初始化中创建控件 以便它们可用于视图状态 但是 我还有其他几个按钮也会导致回发 并且我不想在页面初始化中创建控件

  • 在生成语句中格式化日期

    在 Pig 中 我有一个语句 基本上将日期附加到我生成的值中 Data FOREACH Input GENERATE CurrentTime FLATTEN group COUNT guid oas Cnt 输出给了我日期2013 05 2

  • 正则表达式匹配-Java

    我正在从以下格式的文件中获取输入 int1 int2 int3 int4 现在我想在我的Java代码中读取int1 int2 int3和int4 我怎样才能用java中的正则表达式匹配来做到这一点 谢谢 String ints 2 3 4

  • 将服务器日志记录到一个文件，将 SQL 日志记录到另一个文件

    我想使用 Log4J 将所有服务器相 关日志 例如启动和关闭 记录到一个文件 并将所有 Hibernate SQL 相关日志记录到另一个文件 我正在尝试过滤所有不相关的日志以仅查看 SQL 查询 如果有办法实现的话 有什么想法或建议吗 Th

  • 使用 MVC 和 jQuery 进行内联客户端验证

    我设置了一个简单的示例来显示 jquery UI 对话框中的表单 并希望在该表单上启用内联客户端验证 然后我将脚本添加到我的母版页中 assets js jquery 1 4 3 min js gt gt assets js jquery

  • 带有 roboguice 抛出异常的简单 Android 应用程序

    我有一个非常简单的应用程序 可以运行 但是当我添加 roboguice 时 它 会抛出异常 java lang RuntimeException 无法实例化应用程序 com MyFirstApp MyFirstApplication jav

  • 如何将 Roman Nuriks Wizard Pager 审核中的数据放入数据库？

    好吧 我知道以前已经问过这个问题 但问题和答案都对我的情况没有帮助 我需要做的只是从向导末尾的审阅页面获取所有数据并将其放入我的 SQLite 数据库中 以便我将来可以在我的应用程序中使用它 我什至不确定在这种情况下我应该上哪门课 我真的希

  • Android无法从ListView Row中按钮的onClick中找到方法

    我有一个从自定义适配器填充的 ListView 每行有 1 个按钮 在 xml 中 按钮已传递 onClick 属性 我只有 xml 没有设置任何 OnClickListeners 另请注意 public void myMethod Vie

  • POSIX 正则表达式 - 零个或一个括号表达式匹配？

    我正在尝试使用正则表达式来解析源文件并搜索以 LOG 一词开头的 C 程序中的函数 后面可能会或可能不会出现类 1248AFM 中的第二个字符 然后后面跟着一个左括号 这是在 Windows 下使用 mingw 开发的 但最终将使用 gcc

  • YouTube API v3 错误：403（playlistItemsNotAccessible）

    这是我在 stackoverflow 上的第一篇文章 请让我知道我是否应该重新表述问题和 或提供有关该问题的更多详细信息 使用上提供的 javascript 示例https developers google com youtube v3

  • WebGL/OpenGL：性能比较

    出于教育目的 我需要比较 WebGL 与 OpenGL 的性能 我有两个用 WebGL 和 OpenGL 编写的等效程序 现在我需要获取它们的帧速率并进行比较 在 JavaScript 中我使用requestAnimationFrame动画

  • 如何从各个部分（例如文件夹路径、名称和扩展名）创建文件的完整路径？

    我需要将文件路径名传递给模块 如何从目录名 基本文件名和文件格式字符串构建文件路径 该目录在调用时可能存在也可能不存在 例如 dir name home me dev my reports base filename daily repor

  • 迭代时浮点数不精确

    我有一个函数 可以根据范围内的值计算 3d 空间中的点 0 1 我面临的问题是 二进制浮点数不能精确表示 1 函数中计算的数学表达式能够计算出以下值 t 1 0 但该值永远不会被函数接受 因为它在计算之前检查是否符合范围 curves er

  • 如何使用反应嵌入菜单循环

    我正在尝试做什么 学习为我的discord py 机器人制作一个合适的帮助菜单ctx message author根据给出的反应对消息做出反应 机器人会检查他们是否已做出反应 然后编辑消息 如果ctx message author如果不反应

  • 将“Position：fixed”div设置为与父div（flexbox项）相同的宽度

    如何使 NavWrapper 与父级的宽度相同 我希望这些链接位于固定位置 即使主要部分溢出 我知道如何在没有 Flex 的情况下做到这一点 有没有纯 CSS 的方法可以做到这一点 body padding 0 margin 0 wrapp

热门标签