Retrieve the width of a fixed div element based on the parent element's width, set

I attempted to set a fixed div to occupy 100% of its parent, but it is taking 100% of the screen instead.

You can find the code I used here: http://codepen.io/rodboc/pen/ZOOEWp

HTML

<div id="wrapper">
  <div class="box">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
    </div>
  </div>
</div>

CSS

#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
  padding: 10px;
}
#wrapper .box {
  width: 100%;
}
#wrapper .header {
  width: inherit;
  position: fixed;
  background: #2ecc71;
}
#wrapper .content {
  width: inherit;
  background: #27ae60;
}

If I define the width for the parent in pixels, it works, but I need it to be in 100%.

htmlcss

Answer №1

One way to solve this is by moving the header outside the box div.

body, html {
  margin: 0;
  width: 100%
}
#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
  padding: 10px;
}
#wrapper .box {
  background: lime;
}
#wrapper .header {
  width: inherit;
  position: fixed;
  background: #2ecc71;
}
#wrapper .content {
  background: #27ae60;
}
<div id="wrapper">
  <div class="header">
    <p>Header</p>
  </div>
  <div class="box">
    <div class="content">
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
    </div>
  </div>
</div>

Answer №2

body, html {
  width: 100%
}
#wrapper {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
}
#wrapper .box {
  width: 100%;
  max-width: 238px;
  margin: 10px;
  background: lime;
}
#wrapper .header {
  width: 100%;
  position: fixed;
  background: #2ecc71;
  max-width: inherit;
}
#wrapper .content {
  width: 100%;
  background: #27ae60;
}
<div id="wrapper">
  <div class="box">
    <div class="header">
      <p>Header</p>
    </div>
    <div class="content">
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
      <p>Content here Lorem Ipsum</p>
    </div>
  </div>
</div>

Fixed positioning no longer follows the parent's positioning.

According to the reference guide: position:fixed MDN

Fixed elements do not occupy space within the document flow. Instead, they are positioned relative to the viewport and do not shift when scrolling. When printed, they remain fixed in that position on every page. This property always creates a new stacking context.

One solution is to set the parent's max-width and allow the child to inherit it. Therefore, the snippet I provided should exhibit this behavior.

Answer №3

Try this solution to potentially resolve your problem by adjusting the styling of the header class:

#container .header {
  width: 100%;
  position: fixed;
  background: #3498db;
  max-width: calc(100% / 4);
}

Feel free to see if this works for your needs:

Answer №4

Here is a simple solution using a clean and organized code structure:

#container {
  width: calc(100% / 3);
  height: 900px;
  background: #ecf0f1;
  margin: 0 auto;
  padding: 10px;
}

#container .box {
  width: 100%;
  position: relative;
}

#container .header {
  width: 100%;
  position: absolute;
  background: #2ecc71;
}

#container .content {
  width: 100%;
  overflow: auto;
  background: #27ae60;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

cssreactjswebpackbootstrap-4next.js

Potential dangers involved in sending HTML content through an AJAX request over a secure HTTPS connection

I am exploring the idea of dynamically loading HTML content, such as updating a Bootstrap modal dialog's contents using AJAX calls instead of refreshing the entire page. However, before I proceed, I want to understand the potential risks involved and ...

javascripthtmlajaxsecurity

Guidance on utilizing jQuery to display values depending on a dropdown selection

This code snippet displays movie data from a JSON variable in a dropdown list based on the selected city. It also needs to show the movie name and theaters list when a user selects a movie, along with the theater dropdown remaining unchanged. Here is my H ...

javascriptjqueryhtmljson

What is the best way to choose all the checkboxes in a checkbox list, such as a ToDo List?

I am currently working on developing a to-do list where each item includes a checkbox. My goal is to be able to select these checkboxes individually by clicking on them. Furthermore, I would like the checkboxes to toggle between being checked and unchecked ...

javascripthtmlcssaddeventlistener

Challenge with the contrast of text color on dark mode with a backdrop of light color texture (image)

Currently, I am using Bootstrap 4 and I have set a light coloured .png image as the background for the navbar and body. The footer area has a dark background with off-white text colour. By default, the text colour is black to complement the light-coloured ...

cssbootstrap-4browseraccessibilitydarkmode

Creating a horizontal slideshow for multiple divs can be achieved through various methods,

I'm feeling a little lost when it comes to creating a slideshow similar to this image: (Symbian^3 music menu) https://i.sstatic.net/oK0F2.png Can anyone provide me with a straightforward code example or a helpful resource to achieve something simila ...

javascriptjqueryhtmlcss

Positioning of content in bootstrap's navbar and dropdown menus

The issue lies in the drop-down functionality (you can check out the problematic html code on this codepen, originally inspired by this source). <header class="pb-3"> <nav class="navbar navbar-expand-md navbar-light bg-white borde ...

cssdrop-down-menudropdownnavbarbootstrap-5

Tips for creating a responsive navigation bar using your own custom CSS styling

While working on a website using bootstrap, I encountered an issue with responsiveness when adjusting the text size and gap of the navigation items. By increasing the size and adding a gap through fs-4 and style="gap: 10vh;", the default small si ...

htmlcssbootstrap-5

Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup... https://i.stack.imgur.com/ZsTdI.png I have an input field, but I'm having trouble placing the image in that position. <div class="row"> <div class="col-sm-4 col-m ...

csshtmltwitter-bootstrapgrid

What steps are needed to adjust a modal window so that it perfectly fits the size of the image it contains?

I am currently utilizing Bootstrap 4.2 to create a popup window (modal) featuring an image displayed at its real size (100%) in both width and height, provided that the browser window size permits. If the image surpasses the window dimensions, it should au ...

htmlcssbootstrap-4

Include a sharing option within the magiczoomplus feature

My current project involves creating a WordPress site using Artisteer along with several plugins to showcase photo galleries. To enhance the user experience, I purchased an e-commerce WordPress theme which features a share button that I really like. Now, I ...

javascriptcssmagiczoomplus

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

I am looking to create transitions in NextJs that involve a smooth shift from a thumbnail image to a full-screen header when clicking on a project from the home page. I prefer utilizing internal routing rather than React Router, but I am open to using that ...

javascriptcssreactjsnext.jscss-transitions

What is preventing us from setting a child's width and height to match that of the parent element?

Parent element is a div with a width of 300px and a height of 40px, containing a child input. In the following code snippet: myinput = document.getElementById("e2"); myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;' div{ ...

javascripthtmlcss

Positioning parent and child elements using CSS

If you have a moment, please check out this URL where I've provided a more detailed explanation of the issue: How to Make an Image Responsive Within a Division I am looking to adjust the width of .slider-wrapper to 100%. Can anyone advise on how to u ...

htmlcsstwitter-bootstrap

Tips for incorporating shapes and decorative elements into your page design effectively

I have searched everywhere on the internet but couldn't find an answer to this question. The question is simple: How can I add shapes or decorations to a page layout without causing it to look broken inside a responsive container? Click here to view ...

htmlcssbootstrap-5

Develop a custom WordPress meta box for managing the color scheme of individual posts and pages

Currently, I am in the process of learning how to create a custom WordPress meta box with a select tag for controlling the color scheme of individual posts/pages. My goal is to implement a system where I can use if statements to load an additional CSS file ...

csswordpressselectmetabox

Using Jquery to attach an event to a particular div which is part of a group of divs sharing

I am trying to implement a mouseup event on a series of divs that, when clicked, will reveal a child div ('menu'). All the parent divs have the same class. Here is an example: <div class="container"> <div class="menu"><p>Text ...

javascriptjqueryhtmlcssevents

Dropdown does not populate with data

HTML content <select class="form-control" tabindex="-1" id="superId" name="superId[]" multiple="multiple" required="required" data-bind="options: SupArray, optionsText: ' ...

javascriptjqueryhtmlajaxknockout.js

Conceal div elements containing identical information by utilizing jQuery

I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery. The duplicate ...

javascriptjqueryhtmlcssduplicates

modify the tr element within a jQuery context

I am attempting to convert a "yes" to a select dropdown that allows users to choose between yes and no. The HTML structure is as follows: <tr> <td>text</td> <td>no (needs to be changed via JS)</td> <td><a href="#"&g ...

javascriptjqueryhtmljquery-selectors