increase height on fixed div and make scrollable-CodePudding

I have a main div called .div1 on top of it I have a fixed div container that contains my fixed div called .fixedDiv. What I'm trying to do is increase the height of class .fixedDiv and make the scroll respond to the height and content of .fixedDiv and not class .div1. How can I achieve this? Thanks in advance.

.div1 {
  width: 100%;
  height: 275vh;
  background-color: gold;
}

.fixedDivCon {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 45, 46, 0.89);
  z-index: 9999;
  overflow: auto;
}

.fixedDivCon .fixedDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  /*not working*/
  height: 75vh;
  background-color: #ffffff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div >
  <div >
  </div>
</div>

<div >

</div>

CodePudding user response：

Try this

.div1 {
  width: 100%;
  height: 275vh;
  background-color: gold;
}

.fixedDivCon {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  /* Enter desired height here */
  height: 75vh;
  background-color: rgba(43, 45, 46, 0.89);
  z-index: 9999;
  overflow: auto;
}

.fixedDivCon .fixedDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 100%;
  background-color: #ffffff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

CodePudding user response：

Is this what you're trying to achieve?

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
}

.div1 {
  width: 100%;
  height: 100%;
  background-color: gold;
}

.fixedDivCon {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 45, 46, 0.89);
  z-index: 9999;
}

.fixedDiv {
  position: fixed;
  padding: 2%;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 75vh;
  background-color: #ffffff;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
}

<body>
  <div >
    <div >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus. Ut pharetra sit amet aliquam id diam maecenas ultricies
      mi. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Ante metus dictum at tempor commodo ullamcorper a lacus. Sed viverra ipsum nunc aliquet bibendum. Leo vel orci porta non pulvinar neque laoreet suspendisse. Tortor aliquam nulla facilisi
      cras fermentum odio eu feugiat pretium. Lectus magna fringilla urna porttitor rhoncus dolor purus non. At tempor commodo ullamcorper a. Tincidunt vitae semper quis lectus nulla at volutpat diam. Ultrices neque ornare aenean euismod elementum nisi
      quis eleifend. Nec feugiat nisl pretium fusce id velit ut tortor pretium. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Dictum at tempor commodo ullamcorper a. Convallis
      a cras semper auctor neque vitae tempus quam. Non tellus orci ac auctor augue. Interdum velit euismod in pellentesque massa placerat duis ultricies. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Id aliquet lectus proin nibh nisl.
      A cras semper auctor neque vitae tempus quam pellentesque. Mauris rhoncus aenean vel elit. Tellus in hac habitasse platea. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Id aliquet lectus proin nibh nisl. Imperdiet massa
      tincidunt nunc pulvinar sapien et. Porttitor massa id neque aliquam vestibulum. Consectetur lorem donec massa sapien faucibus et. Nulla aliquet enim tortor at auctor urna nunc id. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Cras
      fermentum odio eu feugiat pretium. Aenean pharetra magna ac placerat vestibulum. Diam phasellus vestibulum lorem sed risus. Mauris rhoncus aenean vel elit scelerisque. Molestie a iaculis at erat pellentesque adipiscing commodo. In hendrerit gravida
      rutrum quisque non. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Metus dictum at tempor commodo ullamcorper a lacus. Risus quis varius quam quisque id
      diam vel. A diam maecenas sed enim ut sem viverra aliquet. Bibendum est ultricies integer quis. Venenatis tellus in metus vulputate eu. At in tellus integer feugiat. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Maecenas sed enim ut
      sem viverra aliquet eget sit. Est sit amet facilisis magna etiam tempor orci eu. Pulvinar neque laoreet suspendisse interdum. Lacus laoreet non curabitur gravida arcu ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus. Ut pharetra sit amet aliquam id diam maecenas ultricies mi. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Ante metus
      dictum at tempor commodo ullamcorper a lacus. Sed viverra ipsum nunc aliquet bibendum. Leo vel orci porta non pulvinar neque laoreet suspendisse. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Lectus magna fringilla urna porttitor
      rhoncus dolor purus non. At tempor commodo ullamcorper a. Tincidunt vitae semper quis lectus nulla at volutpat diam. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nec feugiat nisl pretium fusce id velit ut tortor pretium. At
      ultrices mi tempus imperdiet nulla malesuada pellentesque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Dictum at tempor commodo ullamcorper a. Convallis a cras semper auctor neque vitae tempus quam. Non tellus orci ac auctor augue.
      Interdum velit euismod in pellentesque massa placerat duis ultricies. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Id aliquet lectus proin nibh nisl. A cras semper auctor neque vitae tempus quam pellentesque. Mauris rhoncus aenean
      vel elit. Tellus in hac habitasse platea. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Id aliquet lectus proin nibh nisl. Imperdiet massa tincidunt nunc pulvinar sapien et. Porttitor massa id neque aliquam vestibulum.
      Consectetur lorem donec massa sapien faucibus et. Nulla aliquet enim tortor at auctor urna nunc id. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Cras fermentum odio eu feugiat pretium. Aenean pharetra magna ac placerat vestibulum.
      Diam phasellus vestibulum lorem sed risus. Mauris rhoncus aenean vel elit scelerisque. Molestie a iaculis at erat pellentesque adipiscing commodo. In hendrerit gravida rutrum quisque non. Nisl suscipit adipiscing bibendum est ultricies integer quis
      auctor. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Metus dictum at tempor commodo ullamcorper a lacus. Risus quis varius quam quisque id diam vel. A diam maecenas sed enim ut sem viverra aliquet. Bibendum est ultricies
      integer quis. Venenatis tellus in metus vulputate eu. At in tellus integer feugiat. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Maecenas sed enim ut sem viverra aliquet eget sit. Est sit amet facilisis magna etiam tempor orci eu.
      Pulvinar neque laoreet suspendisse interdum. Lacus laoreet non curabitur gravida arcu ac.
    </div>
  </div>
  <div >
  </div>
</body>

Or did you want the body to be scrollable as well?

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 275vh;
  overflow-y: scroll;
}

.div1 {
  width: 100%;
  height: 100%;
  background-color: gold;
}

.fixedDivCon {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 45, 46, 0.89);
  z-index: 9999;
}

.fixedDiv {
  position: fixed;
  padding: 2%;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 75vh;
  background-color: #ffffff;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
}

<body>
  <div >
    <div >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus. Ut pharetra sit amet aliquam id diam maecenas ultricies
      mi. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Ante metus dictum at tempor commodo ullamcorper a lacus. Sed viverra ipsum nunc aliquet bibendum. Leo vel orci porta non pulvinar neque laoreet suspendisse. Tortor aliquam nulla facilisi
      cras fermentum odio eu feugiat pretium. Lectus magna fringilla urna porttitor rhoncus dolor purus non. At tempor commodo ullamcorper a. Tincidunt vitae semper quis lectus nulla at volutpat diam. Ultrices neque ornare aenean euismod elementum nisi
      quis eleifend. Nec feugiat nisl pretium fusce id velit ut tortor pretium. At ultrices mi tempus imperdiet nulla malesuada pellentesque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Dictum at tempor commodo ullamcorper a. Convallis
      a cras semper auctor neque vitae tempus quam. Non tellus orci ac auctor augue. Interdum velit euismod in pellentesque massa placerat duis ultricies. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Id aliquet lectus proin nibh nisl.
      A cras semper auctor neque vitae tempus quam pellentesque. Mauris rhoncus aenean vel elit. Tellus in hac habitasse platea. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Id aliquet lectus proin nibh nisl. Imperdiet massa
      tincidunt nunc pulvinar sapien et. Porttitor massa id neque aliquam vestibulum. Consectetur lorem donec massa sapien faucibus et. Nulla aliquet enim tortor at auctor urna nunc id. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Cras
      fermentum odio eu feugiat pretium. Aenean pharetra magna ac placerat vestibulum. Diam phasellus vestibulum lorem sed risus. Mauris rhoncus aenean vel elit scelerisque. Molestie a iaculis at erat pellentesque adipiscing commodo. In hendrerit gravida
      rutrum quisque non. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Metus dictum at tempor commodo ullamcorper a lacus. Risus quis varius quam quisque id
      diam vel. A diam maecenas sed enim ut sem viverra aliquet. Bibendum est ultricies integer quis. Venenatis tellus in metus vulputate eu. At in tellus integer feugiat. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Maecenas sed enim ut
      sem viverra aliquet eget sit. Est sit amet facilisis magna etiam tempor orci eu. Pulvinar neque laoreet suspendisse interdum. Lacus laoreet non curabitur gravida arcu ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus. Ut pharetra sit amet aliquam id diam maecenas ultricies mi. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Ante metus
      dictum at tempor commodo ullamcorper a lacus. Sed viverra ipsum nunc aliquet bibendum. Leo vel orci porta non pulvinar neque laoreet suspendisse. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Lectus magna fringilla urna porttitor
      rhoncus dolor purus non. At tempor commodo ullamcorper a. Tincidunt vitae semper quis lectus nulla at volutpat diam. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Nec feugiat nisl pretium fusce id velit ut tortor pretium. At
      ultrices mi tempus imperdiet nulla malesuada pellentesque. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Dictum at tempor commodo ullamcorper a. Convallis a cras semper auctor neque vitae tempus quam. Non tellus orci ac auctor augue.
      Interdum velit euismod in pellentesque massa placerat duis ultricies. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Id aliquet lectus proin nibh nisl. A cras semper auctor neque vitae tempus quam pellentesque. Mauris rhoncus aenean
      vel elit. Tellus in hac habitasse platea. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Id aliquet lectus proin nibh nisl. Imperdiet massa tincidunt nunc pulvinar sapien et. Porttitor massa id neque aliquam vestibulum.
      Consectetur lorem donec massa sapien faucibus et. Nulla aliquet enim tortor at auctor urna nunc id. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Cras fermentum odio eu feugiat pretium. Aenean pharetra magna ac placerat vestibulum.
      Diam phasellus vestibulum lorem sed risus. Mauris rhoncus aenean vel elit scelerisque. Molestie a iaculis at erat pellentesque adipiscing commodo. In hendrerit gravida rutrum quisque non. Nisl suscipit adipiscing bibendum est ultricies integer quis
      auctor. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Metus dictum at tempor commodo ullamcorper a lacus. Risus quis varius quam quisque id diam vel. A diam maecenas sed enim ut sem viverra aliquet. Bibendum est ultricies
      integer quis. Venenatis tellus in metus vulputate eu. At in tellus integer feugiat. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Maecenas sed enim ut sem viverra aliquet eget sit. Est sit amet facilisis magna etiam tempor orci eu.
      Pulvinar neque laoreet suspendisse interdum. Lacus laoreet non curabitur gravida arcu ac.
    </div>
  </div>
  <div >
  </div>
</body>