CODEWITHSUNDEEP
htmlcss
Duck
Duck

Reputation: 36003

How to make a DIV below another when the first one has variable height

I have a div that is a banner. This banner is an image like this

<div id="banner"><img style="width:100%;" src="images/banner.jpg"/></div>

This is #banner

#banner {
  cursor:pointer;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

This div scales proportionally as the page increases in size. So, if a page is 500px wide the banner will have, for example, 100px heigh but if the page is 1000px wide, the div will have 200px height.

I want a second div to be glued to the bottom of this one, with a margin of 10px. So, if the first div is 500x100 and its top is at zero, I want the second div to be drawn at top 110px.

I want the whole thing to be dynamic, so, if the user shrinks the page, the first div shrinks but the second one is always 10 px below.

Always like

┌───────────────────────────┐
│                           │
└───────────────────────────┘
┌───────────────────────────┐
└───────────────────────────┘

Upvotes: 1

Views: 330

Answers (2)

DrMoney
DrMoney

Reputation: 355

Why does it need to be fixed? Couldn't you just have it as a normal DOM element?

I made a codepen to show you what I mean https://codepen.io/sean-mooney/pen/zYvybVp

If you really want it to be fixed, make a container element like 

<div class="fixed">
    <div class="banner1">
    </div>
    <div class="banner2">
    </div>
</div>

That way the container will be fixed but inside the container it will be a normal structure, free from the fixed restrictions.

Hope that helps

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273640

If you know the ratio of your image you can consider vw unit to define the margin:

#banner {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.box {
  margin-top:calc(10px + 100vw/4); /* 4 = ratio of your image (1200/300)*/
  border:5px solid;
  height:100px;
}

body {
 margin:0;
 min-height:300vh;
}
<div id="banner"><img style="width:100%;" src="https://i.picsum.photos/id/0/1200/300.jpg"></div>
<div class="box"></div>

Or simply use position:sticky. I don't know your use case but it should give the same result:

#banner {
  cursor: pointer;
  position: sticky;
  top: 0;
}

.box {
  margin-top:10px;
  border:5px solid;
  height:100px;
}

body {
 margin:0;
 min-height:300vh;
}
<div id="banner"><img style="width:100%;" src="https://i.picsum.photos/id/0/1200/300.jpg"></div>
<div class="box"></div>

Upvotes: 2

Related Questions