javascript - 固定定位溢出不滚动

Question

在我的 html 中，我不知道header高度。那么如何使内容在溢出时变得可滚动？

.parent{
  border:2px solid red;
  position:fixed;
  top:0;
  left:0;
  width:20%;
  height:50%;
}

header{
  width:100%;
  border:1px solid red;
}

.content{
  flex:1;
  position: relative;
  overflow-y:scroll;
  background:lightgreen;
}

<div class="parent">
  <section>
    <header>
      <h1>Title</h1>  
    </header>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      Why do we use it?
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </section>
</div>  

标签： javascripthtmlcss

Answer 1

我看到您的.contentdiv 具有flex:1;您需要将弹性项目的父项设置为的集合，display:flex否则您的弹性盒特性将不起作用。您可能还希望将 flex-direction 设置为 column。此外，如果您希望弹性项目填充容器，您的弹性项目需要是display:flex附加到它的父级的直接子级。所以要么删除 要么 将<section>设置<section>为 flexbox 并给它display:flex. 这是一个片段：

.parent{
  border:2px solid red;
  position:fixed;
  top:0;
  left:0;
  width:20%;
  height:50%;
  display:flex;
  flex-direction:column;
}

header{
  width:100%;
  border:1px solid red;
}

.content{
	position: relative;
  background:lightgreen;
  width:100%;
  flex:1;
  overflow-Y:scroll;
}

<div class="parent">
  <header>
    <h1>Title</h1>  
  </header>
  <div class="content">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
</div>