将“Position：fixed”div的宽度设置为父div（flexbox项目） [英] Set the same width of a “Position: fixed” div as parent div(flexbox item)

问题描述

我怎样才能使父NavWrapper宽度相同？

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

我知道如何在没有Flex的情况下做到这一点。有没有什么纯CSS的方式来做到这一点？

body {padding：0 ; margin：0} .wrapper {display：flex;} nav {flex：1 1 150px; background：grey;}。nav-wrapper {width：100％;位置：固定;顶部：0;左：0;显示：弯曲; 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 =＃>主页< / a> < a href =＃>关于< / a> < / DIV> < / NAV> <节> < p为H.的Lorem< / p为H. < / section>< / div>

解决方案

您不需要 fixed position，您可以在查看下面的示例后看到为什么这么说：

删除 fixed 定位并将 height：100vh 添加到 nav ：

  nav {
 flex：1 1 150px; 
背景：灰色; 
身高：100vh; 
 
 
 
 $ b $ p 
 $ b 
现在将内容放在内部 div定位绝对像这样：
  section {
 flex：5 1 500px; 
 padding：20px; 
 position：relative; 
 overflow-y：auto; 
} 
 .inner {
 position：absolute; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 
  
这将允许部分保持 100vh   nav-wrapper ，额外的高度将会溢出。
 
 
 
 
 
 
  body {padding：0; margin：0} .wrapper {display：flex;} nav {flex：1 1 150px;背景：灰色; height：100vh;}。nav-wrapper {width：100％;显示：flex; flex-direction：column;}。nav-wrapper a {flex：1 1; border：1px solid red;} section {flex：5 1 500px; padding：20px;位置：相对; overflow-y：auto;}。inner {position：absolute;顶部：0;左：0;宽度：100％; }  < div class =包装> < nav role =navigation> < div class =nav-wrapper> < a href =＃>主页< / a> < a href =＃>关于< / a> < / DIV> < / NAV> <节> < div class =inner> < p为H.的Lorem< / p为H. 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。你们不要这样说，我们要饶恕你们，因为我们要饶恕那些人。 < p为H.的Lorem< / p为H. 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。你们不要这样说，我们要饶恕你们，因为我们要饶恕那些人。 < p为H.的Lorem< / p为H. 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。你们不要这样说，我们要饶恕你们，因为我们要饶恕那些人。 < / DIV> < / div>< / div>  

并让我知道你的意见。谢谢！

How can Ｉ make the same width of the NavWrapper as parent?

I want these links at a fixed position even the main section overflows.

I know how to do this without Flex. Is there any pure CSS way to do that?

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>

解决方案

You don't need fixed position- you can see why I say this after looking at the example below:

Remove the fixed positioning and add height: 100vh to nav:

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

Now wrap the contents on a section into an inner div that is positioned absolute like this:

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

This will allow the section to remain at 100vh of the nav-wrapper and the extra height will overflow.

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>

Check this out and let me know your feedback. Thanks!

这篇关于将“Position：fixed”div的宽度设置为父div（flexbox项目）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！