Make a DIV follow you while you are browsing, being FLEXBOX and inside another DIV

Question

Make a DIV follow you while you are browsing, being FLEXBOX and inside another DIV

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

3

Good afternoon. I have three main div , one parent and two child . The parent is a flexbox, so your children will adjust to the width of the page. The problem is that I want one of the two children / child to follow you as you browse.

Currently, the website has this visualization:

The first div is basically the one with all the content, the one on the left. The second is the one on the right, red. I would like the latter to follow you while scroll eas / browse. For this I can use position: fixed .

However, when I activate this position the div red is superimposed on the blue one. What I want is to keep keeping to the right. How can I do this? Using margin ?

Here is a JSfiddle . The div left has class = main and the right class = images (this is the one with position: fixed , you can delete this property so that they see how it fits but it does not follow you).

html css

asked by alejnavab 22.09.2016 в 21:07

source

3 answers

Query css for certain tags Show required message in an input="select"

score 2 · Answer 1

What you say does not make much sense for the following reasons:

When doing the absolute left or fixed part, the father's body will not grow .
If you make the right part fixed then using flexbox is meaningless because it will not apply if you have position: fixed .

What you want you can do it in two ways:

Giving a fixed position to the div on the right.

Giving a height of 100% of the view height AND a overflow: auto to the div of the content.

Both will result in the same, but the second option is cleaner.

Marked

<section class="parent">
  <section class="child">
    <div class="content">A</div>
  </section>
  <section class="child">
    <div class="content">B</div>
  </section>
</section>

Option # 1

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.parent {
  overflow: auto;
  max-height: 100vh;
}
.child:first-of-type {
  background-color: gold;
  overflow: auto;
  width: 50%;
}
.child:last-of-type {
  background-color: teal;
  height: 100%;
  position: fixed;
  right: 1.6%;
  top: 0;
  width: 50%;
}
.content {
  background-color: coral;
  color: #fff;
  display: flex;
  font-family: 'segoe ui';
  font-size: 48pt;
  font-weight: lighter;
  height: 1500px;
  justify-content: center;
  margin: 0px auto;
  width: 100px;
}

We see how the right div we have given right: 1.6% . This is necessary otherwise, will cover the scrollbar . You can set it to 0 and see it for yourself.

Option # 2

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.child {
  flex: 1;
}
.child:first-of-type {
  background-color: gold;
  overflow: auto;
}
.child:last-of-type {
  background-color: teal;
}
.content {
  background-color: coral;
  color: #fff;
  display: flex;
  font-family: 'segoe ui';
  font-size: 48pt;
  font-weight: lighter;
  height: 1500px;
  justify-content: center;
  margin: 0px auto;
  width: 100px;
}

This solution is the cleanest. We do not need to use position: fixed . Only the father must have 100% of the view height and the left div, same, but making it scrollable with overflow: scroll .

Demos

score 1 · Answer 2

1

I would do it with a

float: right;

You use it in the div that you want to keep on the right.

answered by 22.09.2016 в 21:39

score 0 · Answer 3

0

Try this.

div.images {
width: 100%;
flex-grow: 1;
background-color: red;
height: 100vh;
margin-left: 68%; <---- Solo inserta esto
position: fixed;
}

Is this what you want?

answered by 22.09.2016 в 21:39