Contents are exceeding the limit of the container if the div is fixed

Question

I have some issue with the bootstrap container. I have two columns and both columns are displaying properly inside the container.

Now Inside the container I have a div which is fixed. If I set div fixed then my contents are exceeding the limit of the container. Check below image

Is there any way to display the content inside a container something like the first image?

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

.wrapper {
  position: relative;
  height: 100vh
}

.a-heroFixedContent {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

section {
  background-color: #fff;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 20px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="">
  <div class="container">
    <div class="wrapper">
      <div class="a-heroContent a-heroFixedContent">
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <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, 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>

          </div>
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <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, 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>
          </div>
        </div>
      </div>
    </div>

  </div>

  <section style="background-color: #f8f8f8;">
    <div class="container">
      <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, 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, 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>
    </div>
  </section>

  <section>
    <div class="container">
      <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, 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, 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>
    </div>
  </section>

</div>

Would you help me out with this issue?

Mr. Perfectionist · Answer 1 · 2019-08-21T07:02:19.213

0

Why have you gave this?

transform: translateY(-50%);

remove it.

After discussion:

.wrapper {
  position: relative;
  height: 100vh
}

.a-heroFixedContent {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background-color: white;
}

section {
  position: relative;
  z-index: -99;   
  width: 100%;
  padding: 20px 0;
}

edited Aug 21 '19 at 07:02

answered Aug 21 '19 at 06:09

Mr. Perfectionist

2,605
2
24
35

Because of display the div on the center from TOP – questionbank Aug 21 '19 at 06:12
If you want to centre it vertically just follow this answer: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4 – Mr. Perfectionist Aug 21 '19 at 06:14
I agree with your link. If I set top:50% and transform: translateY(-50%); then my div will come to the center of the screen. But that is not my issue. My main issue is the content is exceeding the limit when I set fixed div. – questionbank Aug 21 '19 at 06:16
When you fixed a div, it will not extend your content of screen. So, they will go out of your box. If you don't fixed it it will automatically create a scroll bar if it need. But when fixed, it will not go out of your screen. – Mr. Perfectionist Aug 21 '19 at 06:20
For example, give a height of your wrapper div. suppose height: 800px; Now look at the screen. There will be a scroll bar but your div will fixed on screen. – Mr. Perfectionist Aug 21 '19 at 06:23
https://www.w3schools.com/css/css_positioning.asp read this. n element with position: fixed; is positioned relative to the ```viewport``` – Mr. Perfectionist Aug 21 '19 at 06:25
Yes, If I set height then I will get the scroll and my div will be fixed. Yes, I need my div fixed only. I just shared the one section code. I have 3 more sections below. I need the first section to be fixed on the screen and when the user scroll then the second section will come to the screen. I don't want to move to the first section. – questionbank Aug 21 '19 at 06:27
Yes, I need help because I haven't found the solution till now. – questionbank Aug 21 '19 at 06:33
Do you want to fixed your first div? Now it will hide when last sections are coming – Mr. Perfectionist Aug 21 '19 at 06:51
Yes, In the last to last comment I was trying to tell you. In my snippet. It's working. But my main issue is if parent div is fixed then why my content are not showing inside the container box....you need to check my image which is in the question. – questionbank Aug 21 '19 at 06:55
Mr.Perfectionst, I think there is some miscommunication or you haven't understood my issue. My snippet is working. I don't want to change the z-index.....Do one thing...remove the fixed, top and transform from the css. then It will display like this https://prnt.sc/ovg6qo . Now notice here content is displaying inside of the container If I add fixed, top and transform again then it displaying https://prnt.sc/ovg83u both are different. right side column content are exceding. – questionbank Aug 21 '19 at 07:13

Contents are exceeding the limit of the container if the div is fixed

1 Answers1