html - 无法在网格项上精确定位固定位置叠加层-6ren

html - 无法在网格项上精确定位固定位置叠加层

转载作者：可可西里更新时间：2023-11-01 13:19:20

我正在尝试创建一个包含 2 列的网格:
1) 左侧的窄固定位置侧边栏
2) 右侧主要内容的宽栏。

根据 this post , 固定位置的网格元素有问题。一种回应是:

wrap your contents in a div and set the div to have position: fixed.

作者成功提交了一个demonstration这种技术。在这里，固定侧边栏位于屏幕的右侧。

由于我需要在左侧固定侧边栏，因此我采用了该技术，如图所示 here .我的改编基本上是为侧边栏中覆盖的

提供宽度:

aside div {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  position: fixed;
}

改编原则上是可行的，但由于某种原因，叠加层向右偏移了一小段，如蓝色边框所示(提供用于调试目的)。结果，边栏中的文本溢出，文本换行发生在边栏之外。

1)为什么会这样？

2) 是否可以精确在网格的侧边栏上覆盖固定位置的div？我已经尝试过代码笔中显示的某些元素的边距和填充，但它们没有帮助。我还尝试减小覆盖层的宽度，如图所示 here .这可行，但是是任意的。

最佳答案

您可以将 width:100% 添加到 CSS 的 .grid > * {} 部分。这只会覆盖 .grid 的所有子元素的宽度，以填满网格元素的整个宽度，这样子元素就不会溢出网格。

这是您的最终代码:

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "sb mn";
  grid-column-gap: 10px;
}

.grid>* {
  margin: 0;
  padding: 0;
  width: 100%;/*  This is the part I added */
}

.sidebar {
  grid-area: sb;
  border: 1px solid green;
  background-color: red;
}

aside div {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  /* padding: 0 15px 0 5px; */
  position: fixed;
}

.main {
  grid-area: mn;
}

<div class="grid">
  <aside class="sidebar">
    <div>
      <h4>laboris nisi</h4>

      <p>
        Cum sociis natoque penatibus bibendum enim facilisis gravida neque convallis a cras. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient.
      </p>

      <p>
        Id neque aliquam vestibulum sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer.
      </p>

      <p>
        Vestibulum rhoncus est tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Feugiat nibh sed pulvinar proin gravida.
      </p>
    </div>
  </aside>

  <div class="main">
    <h1>Cras semper auctor neque vitae</h1>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>

    <p>
      Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aenean et tortor at risus. Venenatis a condimentum vitae sapien pellentesque habitant. Sed elementum tempus egestas sed sed risus pretium quam vulputate. Ornare arcu odio ut
      sem nulla pharetra diam sit amet. Aliquam etiam erat velit scelerisque in dictum non. Nunc aliquet bibendum enim facilisis gravida neque convallis a cras. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Eget nulla facilisi etiam dignissim.
      Odio tempor orci dapibus ultrices in. Amet volutpat consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Nibh sed pulvinar proin gravida. Cum sociis natoque penatibus et magnis dis parturient. Non pulvinar
      neque laoreet suspendisse interdum consectetur.
    </p>

    <p>
      Mattis molestie a iaculis at erat. Hac habitasse platea dictumst vestibulum rhoncus. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Facilisis mauris sit amet massa vitae tortor condimentum lacinia. Non diam phasellus vestibulum lorem.
      Sed tempus urna et pharetra pharetra massa massa. Id leo in vitae turpis. Dignissim sodales ut eu sem integer. Erat velit scelerisque in dictum. Id venenatis a condimentum vitae sapien.
    </p>

    <p>
      Vitae semper quis lectus nulla at volutpat. Imperdiet sed euismod nisi porta lorem mollis. Fames ac turpis egestas sed. Tempus quam pellentesque nec nam aliquam sem et tortor. Ut tellus elementum sagittis vitae et leo duis. Habitant morbi tristique senectus
      et netus et malesuada. Penatibus et magnis dis parturient. Dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Sit amet volutpat consequat mauris nunc congue. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Feugiat
      nibh sed pulvinar proin gravida hendrerit lectus. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Aliquet risus feugiat in ante metus. Vitae aliquet nec ullamcorper sit amet. Aliquam malesuada bibendum arcu vitae. Aliquet nibh
      praesent tristique magna sit amet purus. Gravida rutrum quisque non tellus orci ac auctor. Etiam erat velit scelerisque in dictum non consectetur a erat.
    </p>
  </div>
  <!-- main -->
</div>
<!-- grid -->

但是如果你只需要一个固定的侧边栏，你可以只添加 height:100vh; overflow-Y:滚动到.main或@ndvo建议使用position: sticky，这是一个更好的解决方案。

那么你的代码应该变成:

body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas: "sb mn";
  grid-column-gap: 2vw;/* using the unit 'vw'(2% of viewport-width) will make the gap responsive */
  height: 100vh; /* 100% of viewport-height. (Fill up the whole screen height)  */
}

.sidebar {
  grid-area: sb;
  padding: 0 5px;
  /* The part below is just appearance */
  box-shadow: inset 2px 2px red, inset -2px -2px red;
  background: yellow;
}

.sidebarContent {
  position: sticky;
  top: 0;
  /* The part below is just appearance */
  height:60vh;
  background: red;
  text-align: center;
  color: yellow
}

.main {
  grid-area: mn;
  padding: 0 5px;
  /* The part below is just appearance */
  box-shadow: inset 2px 2px red, inset -2px -2px red;
  background: green;
}

.mainContent {
  /* The part below is just appearance */
  background: red;
  text-align: center;
  color: yellow
}

<div class="grid">
  <aside class="sidebar">
    <div class="sidebarContent">
      SideBar Content
    </div>
  </aside>
  <div class="main">
    <div class="mainContent">
      Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>Main
      Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>Main Content<br>
    </div>
  </div>
</div>

切线:

我更喜欢使用 box-shadows 而不是 border，因为边框会占用额外的空间，从而稍微破坏网格百分比(也许我有强制症 😜)。<
我也想推荐GridGarden ，一款只有 28 个非常简单的关卡的游戏(在撰写本文时)。只需完成一次。它帮助了我；它也可能对其他人有帮助。

关于html - 无法在网格项上精确定位固定位置叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54944765/

上一篇：html - CSS 元素自定义顺序折叠的解决方案

下一篇：javascript - 如何制作粘性元素 'float'

文章推荐： windows - Haskell Parsec 编译错误

文章推荐： php - Cloudflare 将子域重定向到目录

文章推荐： html - CSS 元素自定义顺序折叠的解决方案

r - 转换错误 - .subset2(x, i, 精确 = 精确) 中的错误
感觉我在这里遗漏了一些明显的东西，所以提前道歉。无论如何，这是我尝试转换的一些数据a: acct_num year_prem prem exc 001 20
c# - 精确/文字单词或模式匹配正则表达式
我正在尝试将表中的模式与用户话语匹配。 string userUtterance = "I want identification number for number of customers";
linux - gccgo 精确
当尝试在 Precise 上链接 gccgo 时，出现此链接错误: matt@matt-1005P:~/src/gopath/src/meme$ gccgo cmd/meme/main.go -o m
matlab - 样条插值及其(精确)导数
假设我有以下数据和命令: clc;clear; t = [0:0.1:1]; t_new = [0:0.01:1]; y = [1,2,1,3,2,2,4,5,6,1,0]; p = interp1(
matlab - 样条插值及其(精确)导数
假设我有以下数据和命令: clc;clear; t = [0:0.1:1]; t_new = [0:0.01:1]; y = [1,2,1,3,2,2,4,5,6,1,0]; p = interp1(
java - 精确 PrefixQuery 得分更高
我总是想给精确匹配比只匹配前缀的分数更高的分数(例如，“ball”在与“ball*”匹配时应该比“ballistic”得到更高的分数)。我当前(详细)的方法是在创建 PrefixQuery 时始终执
Android MediaPlayer seekTo 精确
有什么解决方法可以让我在 Android 中使用 long 或 double 来寻找音频文件中的位置吗？目前 seekTo 只接受 ints 参数。我想更精确(比如在十分之一秒内) int resID
Swift 3 replacingOccurrences 精确
我的 replacingOccurrences 函数有问题。我有一个这样的字符串: let x = "john, johnny, johnney" 我需要做的只是删除“john” 所以我有这段代码:
python - 精确标签值时出错 - BeautifulSoup
我正在使用 BeautifulSoup 进行网页抓取。我有这段代码来提取 a 标签的值，但它似乎不起作用。显示错误: AttributeError: 'int' object has no attri
algorithm - 精确(纠错)图匹配算法
我要在带有标记顶点和标记有向边的图上寻找一种不精确的图匹配算法。我的任务是检测两个图表的变化以将它们显示给开发人员(想想颠覆差异)。我已经实现了基于禁忌搜索 ( this ) 的优化算法，但我无法让该
apache - .htaccess 精确 url 重定向
我有两个网站: example.com 和 yyy.com 他们都有类似的网络应用程序，但在不同的服务器上。我想让 Apache 将所有路径请求重定向到 example.com 与完全相同的方式yy
php - MySQL 精确 URL 搜索
因此，我尝试合并两个公司信息数据库(从现在起表 A 和表 B)，其中最常见(且可靠)的单一引用点是网站 URL。表 A 已更新，表 B 待更新。我已经从表 A 中提取了 URL，并使用 PHP 清理
javascript - 为什么距离的这种指数衰减会导致 99 [精确] 的一次性误差？
我正在 http://classicorthodoxbible.com/new.html 上制作效果主要描述中的 Angular 色，包裹在自己的跨度中，从他们通常的休息地点移动到随机位置，然后通过指
用于实时音频合成的 C++ 精确 44100Hz 时钟
我目前正在使用我的 Raspberry Pi 及其内置 UART 输入编写 MIDI 合成器。在某个时间点，为了启用 MIDI 输入的实时回放，我必须设置一种环形缓冲区以与 OpenAL 一起使用，
c - 使 C float 精确？
在 C 中，当设置了一个 float 时， int main(int argc, char *argv[]) { float temp = 98.6f; printf("%f\n",
ios - 循环 MP3 精确 iOS
实现 MP3 无间隙循环的最佳可能性是什么？目前我正在使用 AVAudioPlayer 并将 .numberOfLoops() 属性设置为 -1 但可以听到，轨道重新启动。情况并非如此，例如使用 Tr
r - "matrix-like?"的(精确)含义是什么
我想创建不一定是“正确”矩阵的“类矩阵”对象。但是，确切地说，“类矩阵”是什么意思？示例 1 > image(1:9) Error in image.default(1:9) : argument
java - 如何生成包含已解析实体的 XML 文档的*精确*副本
给定一个像这样的 XML 文档: john &title; 我想解析上面的 XML 文档并生成其所有实体已解析的副本。因此，给定上述 XMl 文档，解析器应输出: john
plone - 有一种方法可以在 Plone 中*精确*即时调整图像对象的大小吗？
需要说明的是，这种方法不是我要找的: 事实上，此方法会调整 ImageField 的大小。我想将 Image 对象的大小调整为特定且精确的无比例分辨率。有什么办法吗？ --编辑-- 对我来说，Ima
python - 急切模式下的 TFP 精确 GP 回归
我正在尝试使用 TF2.0 eager 模式执行精确的 GP 回归，基于来自 https://colab.research.google.com/github/tensorflow/probabili

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城