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

Animate the centering of a DIV

Using PHP's include/require method with a dynamic path

Left-aligned and centered - Bootstrap

How to display text on a new line using HTML and CSS?

How to style HTML li elements to wrap like sentences within a paragraph

What is the best way to isolate the CSS of individual components in Angular 2?

When hovering, apply style 1 to all elements with the same id, and style 2 to the hovered element

Arranging containers in a fixed position relative to their original placement

Employing the "div" element to target in CSS styling

Trying to access the 'style' property of a null value is causing an error

Include the circle.css file in the Angular 4 project by loading it in the head section of the

What could be the reason for my Form styling failure?

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

Concerns arise regarding the implementation of an image slider using HTML and CSS

Dropdown selection returning the text value instead of the designated value

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

Executing the command in the Windows Command Prompt by utilizing an HTML button

Dynamic Code for Removing List Items Based on Date

forming a boundary that stands alone, unattached to any other boundaries