分类导航
程序笔记程序问答

与第一个高度相同的第二个绝对 div

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了与第一个高度相同的第二个绝对 div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决与第一个高度相同的第二个绝对 div？@H_197_1@ 开发过程中遇到与第一个高度相同的第二个绝对 div的问题如何解决？下面主要结合日常开发的经验，给出你关于与第一个高度相同的第二个绝对 div的解决方法建议，希望对你解决与第一个高度相同的第二个绝对 div有所启发或帮助；

我有下拉导航，这是绝对位置。我需要将另一个绝对 div 作为此下拉导航的背景，但我需要使用相同的高度和全宽。有可能做到吗？我需要为全屏宽度做红色背景，但红色内容使内容保持与现在相同的位置。

ul {
  List-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexBox;
  display: flex;
  position: relative;
}

ul li {
 margin-right:30px;
}

.dropdown {
  max-wIDth: 100%;
  position: absolute;
  BACkground: red;
}

.content {
 BACkground:blue;
}
<ul>
  <li><span ID="span1">1</span></li>
  <li><span ID="span2">2</span></li>
  <li><span ID="span3">3</span></li>
  <li><span ID="span4">4</span></li>
  <li><span ID="span5">4</span>
    <div class="">
      <div class="full_BACkground"></div>
      <div class="dropdown">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incIDIDunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupIDatat non proIDent,sunt in culpa qui officia deserunt mollit anim ID est laborum.</p>
        <p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim ID est laborum.</p>
      </div>
    </div>
  </li>
</ul>

<p class="content">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Accusamus cumque Dicta disTinctio tempora,eius voluptatum doloremque suscipit numquam,perferendis repellendus animi culpa quo ipsa,eum harum itaque repudiandae,magnam tenetur!</p>

解决方法@H_197_1@

您可以不使用单独的 div 而是使用伪元素 before 来实现此目的。这可以赋予与右侧文本相同的高度，但通过将其平移的量将其定位在视口的最左侧，该量是视口的整个宽度减去其自身宽度 - 即它填充间隙。红色背景的其余部分已经存在，在带有文本的 div 上。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

ul li {
 margin-right:30px;
}
.dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw - 100%);
  BACkground: red;
  height: 100%;
  transform: translateX(-100%);
}
.dropdown {
  max-width: 100%;
  position: absolute;
  BACkground: red;
}

.content {
 BACkground:blue;
}
<ul>
  <li><span id="span1">1</span></li>
  <li><span id="span2">2</span></li>
  <li><span id="span3">3</span></li>
  <li><span id="span4">4</span></li>
  <li><span id="span5">4</span>
    <div class="">
      <div class="full_BACkground"></div>
      <div class="dropdown">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </li>
</ul>

<p class="content">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Accusamus cumque Dicta disTinctio tempora,eius voluptatum doloremque suscipit numquam,perferendis repellendus animi culpa quo ipsa,eum harum itaque repudiandae,magnam tenetur!</p>

,

评论我添加/删除的每一行。基本上，您需要删除 position: relative 元素上的 ul 并将其添加到正文中，同时使用 .dropdown 拉伸 top: 0; right: 0; bottom: 0; left: 0 元素，以便它可以扩展到屏幕的全尺寸。 

html,body {
  height: 100%; /* push body to full screen height */
}
body {
  position: relative; /* make .dropdown position relative to body */
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  /* position: relative; remove this rule */
}

ul li {
 margin-right:30px;
}

.dropdown {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /*stretch element to nearest positioned parent */
  BACkground: red;
}

.content {
 BACkground:blue;
}
<ul>
  <li><span id="span1">1</span></li>
  <li><span id="span2">2</span></li>
  <li><span id="span3">3</span></li>
  <li><span id="span4">4</span></li>
  <li><span id="span5">4</span>
    <div class="">
      <div class="full_BACkground"></div>
      <div class="dropdown">
        <p>Lorem ipsum dolor sit amet,magnam tenetur!</p>

如果你只是想让 .dropdown 的内容留在它的位置，而一个元素在它后面拉伸全屏，那么我建议在有序列表之外添加一个 div 并绝对定位如下：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

ul li {
 margin-right:30px;
}

.dropdown {
  max-width: 100%;
  position: absolute;
  z-index: 2;
  BACkground: red;
}

.content {
 BACkground:blue;
}

.overlay {
  position: absolute;
  z-index: 1;
  top: 0; right: 0; bottom: 0; left: 0;
  BACkground-color: red;
}
<ul>
  <li><span id="span1">1</span></li>
  <li><span id="span2">2</span></li>
  <li><span id="span3">3</span></li>
  <li><span id="span4">4</span></li>
  <li><span id="span5">4</span>
    <div class="">
      <div class="full_BACkground"></div>
      <div class="dropdown">
        <p>Lorem ipsum dolor sit amet,magnam tenetur!</p>

<div class='overlay'></div> <!-- added div that will cover whole page -->

,

所以我想我知道你在找什么。你需要使用js来做到这一点。在大多数情况下，我使用 width: 99vw; 中的 .full_BACkground 来跨越整个宽度，然后使用 js 获取下拉 div 的高度并将其应用于 .full_BACkground

这是：

var dropheight = document.getElementById('redDrop').clientHeight;
document.getElementById("fullbg").style.height = dropheight + "px";
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

ul li {
 margin-right:30px;
}

.dropdown {
  max-width: 100%;
  position: absolute;
  BACkground: red;
}

.content {
 BACkground:blue;
}

.full_BACkground {
  position: absolute;
  BACkground-color: red;
  left: 0;
  width: 99vw;
  z-index: -1;
}
<ul>
  <li><span id="span1">1</span></li>
  <li><span id="span2">2</span></li>
  <li><span id="span3">3</span></li>
  <li><span id="span4">4</span></li>
  <li><span id="span5">4</span>
    <div class="">
      <div class="full_BACkground" id="fullbg"></div>
      <div class="dropdown" id="redDrop">
        <p>Lorem ipsum dolor sit amet,magnam tenetur!</p>

大佬总结

以上是大佬教程为你收集整理的与第一个高度相同的第二个绝对 div全部内容，希望文章能够帮你解决与第一个高度相同的第二个绝对 div所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：div与第一个高度相同的第二个绝对
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap