When the width of the element is set to 100vw, it disrupts the

Question

When the width of the element is set to 100vw, it disrupts the

I'm attempting to expand a sticky element to fit the size of the screen. Here is the HTML code I am using:

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  color:white;
  position: sticky;
  width: 100px;
  height: 100px;
  background: black;
}

<div class="header">Header</div>

<div class="large">Content</div>

Although this code functions, the element does not stretch as intended. If I modify width: 100px to width: 100vw, the sticky positioning to the left becomes dysfunctional. It seems that specifying a relative width and using sticky positioning to the left simultaneously may not be possible.

html css

Answer 1

Answer №1

To achieve the desired result, simply wrap both elements in a div and apply display: inline-block; to that wrapping div:

.container {
  display: inline-block;
}

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  position: sticky;
  width: 100vw;
  height: 100px;
  background: black;
}

<div class="container">
  <div class="header"></div>
  <div class="large"></div>
</div>

Answer 2

To achieve the desired result, simply wrap both elements in a div and apply display: inline-block; to that wrapping div:

.container {
  display: inline-block;
}

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  position: sticky;
  width: 100vw;
  height: 100px;
  background: black;
}

<div class="container">
  <div class="header"></div>
  <div class="large"></div>
</div>

When the width of the element is set to 100vw, it disrupts the

Answer №1

Similar questions

I'm facing an issue where TailwindCSS fails to stretch my VueJS application to full screen width

Center and justify image inside flexbox using MUI

Maintain the aspect ratio of an image within a flex container when the height is adjusted

Bootstrap grid button with maximum flexibility

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

What is the best way to load content into Bootstrap tabs?

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Ensuring text is perfectly centered within a div, regardless of its length

Customizing form designs with the combination of Django and Bootstrap

Guide on modifying CSS properties when hovering over the parent element

Using Vuejs to dynamically render raw HTML links as <router-link> elements

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

Can an image map area be identified using radial coordinates?

Incorporating styling preferences within a directive's template

Navigating through each segment

Define the width and height of images specifically for screens with a maximum device width using @media queries

Obtain the identifier of a div within nested HTML components by utilizing jQuery

Terminal throws an error stating that no default engine was specified and no extension was provided