On the width of fixed elements

  <div class="wrap">
    <div class="header"></div>
    <div class="main"></div>
  </div>

When

header is set to position:fixed , how do I make its width equal to the width of the parent element wrap ?

is there any pure css implementation?

= =
explanation of the answer adopted:

Source: influence of transform on elements

transform downgrade fixed to absolute , so the width is adaptive, so
so fixed element width adaptation can only be handled with js ?

Css front-end

Apr.06,2022

parent element plus 3D transformation is fine, for example: transform: scale3d (1,1,1);

just tried one, left and right are set to 0, and then the width is the same as before

I tried it with width: calc (100%-224px). No, no, no.

fixed is relative to the window element in html, so if you cannot achieve a width equal to its parent element in pure CSS, I will give you two solutions:
1, setting width and its parent element value equal under fixed;
2, replacing fixed with absolute;

you can use

if you don't consider compatibility.

absolute


										
												Previous: Is it necessary to use mock to simulate fake data in front and back-end separate development?
												                		Next: Cannot read property 'length' of undefined in the component
                							
					
						
					
															
						
														
								Menu picture switching problem?
								
  
 there is such a requirement, as shown in the figure are four menu buttons. The four menu icons here are not vector icons similar to Font Awesome, but pictures in png format, namely f.png, u.png, s.png, and p.png. 
 demand: clicking on the correspondi...
								
									
																														Html5
																				css
																				front-end
																				javascript
																			
									
										Feb.27,2021
									
								
							
														
								How do front-end engineers produce dynamic effects efficiently in their work?
								
  dynamic effects that are often overlooked are so important to user experience design  
 Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...
								
									
																														Javascript
																				html5
																				css
																				front-end
																				dynamic-effect
																			
									
										Feb.28,2021
									
								
							
														
								If the width of the parent element is variable, how are multiple child elements evenly distributed?
								
 similar effect:  
 question: the width of the parent element adapts to the width of the browser window, so how are the child elements evenly distributed horizontally (including the left and right margins)? 
 requires compatibility with ie8 regardless of...
								
									
																														Javascript
																				html5
																				css
																				front-end
																			
									
										Mar.11,2021
									
								
							
														
								Compatibility issues between flex-item and overflow-x/y
								
 problem description 
After  flex-item (parent element flex positioning, flex-item refers to its child elements) sets  overflow-x: visible; overflow-y: auto , the x-axis beyond the container is not displayed. This is obviously not in line with the settin...
								
									
																														Flex
																				css3
																				css
																				front-end
																			
									
										Mar.12,2021
									
								
							
														
								The thought of Wisdom toilet
								
  
 as shown in the picture, it is to see if the pothole in the bathroom is occupied, can the front end of this picture be realized, and do the gods have any ideas? thank you 
...
								
									
																														Html5
																				canvas
																				vue.js
																				css
																				front-end
																			
									
										Mar.21,2021
									
								
							
														
								Excuse me, bootstrap layout in the big screen left alignment, in the small screen center alignment how to do, brothers
								
 such as the title, look at the picture  
 
***@mediabootstrap***
...
								
									
																														Html
																				css
																				front-end
																				bootstrap
																			
									
										Mar.22,2021
									
								
							
														
								Html background image problem?
								
 requirements: the page has a large image as the background, which requires that no matter how the browser size changes, the background image will always be in the same proportion (will not be deformed), and will always be covered with the entire browser...
								
									
																														Css
																				front-end
																				html
																				javascript
																			
									
										Mar.22,2021
									
								
							
														
								Why does a pixel become blurred when it is divided into four on the retina screen? I don't understand the explanation of this sentence in the boss Zhang Xinxu blog.
								
 
 
What does this approximate color selection mean? Why should it be approximately selected when it is divided into four? 
...
								
									
																														Css
																				front-end
																			
									
										Mar.29,2021
									
								
							
														
								How to handle overflow of text tag text in svg tags?
								
 Let  s talk in the picture above first 
 
 
 the core code is as follows (please don  t mind if it  s not well written) 
    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!--  -->
      <!--...
								
									
																														Front-end
																				vue.js
																				svg
																				css
																				front-end-design
																			
									
										Apr.26,2021
									
								
							
														
								How to use Webpack so that css can only be used by a single component
								
 for example, I have two components An and B. How do I get  component A  to use only  A.less , and  component B  to use only  B.less . Because they all have the same class name.  it is known that  CSS Module  is available. I  d like to know if there are ...
								
									
																														Css-modules
																				webpack
																				css
																				front-end
																			
									
										Aug.17,2021
									
								
							
														
								How does the iconfont with its own color not change color in the a tag?
								
The icon in  iconfont has its own color, which is wrapped in the a tag and is overwritten by the default color of the a tag. How to solve it? Beginner, ask for guidance! Thank you! 
 the icon selected is monochrome. You can specify  with color, but what ...
								
									
																														Css
																				front-end
																				icon
																				iconfont
																			
									
										Sep.06,2021
									
								
							
														
								Css implementation of complex Polygon
								
 problem description 
 for example, can a figure like the following (the box part indicates the transparent background and the polygonal border with inner shadow) be realized by html+css, and how should it be achieved? 
  
...
								
									
																														Css
																				front-end
																				html
																			
									
										Sep.08,2021
									
								
							
														
								Postcss-write-svg implements 1px frame
								
 problem description 
 read teacher Damu  s article, the solution of 1px on mobile  uses postcss-write-svg , but the border shows up and down but not left or right. I don  t know if I used it wrong .
 related codes 
@svg 1px-border {
  height: 2px;
  @re...
								
									
																														Javascript
																				Border-Properties
																				css
																				postcss
																				Front-end
																			
									
										Nov.03,2021
									
								
							
														
								Amfe-flexible does not automatically add data-dpr?
								
 now I use  amfe-flexible  for mobile adaptation. 
 he would have added the  data-dpr  attribute to the html root node, and then set the  font-size  size based on this attribute. But the problem is that no matter how I set it, he won  t add the data-dpr ...
								
									
																														Html
																				css
																				front-end
																				flexible
																			
									
										Dec.20,2021
									
								
							
														
								Can the text on a floating element show red when the background is white and white when the background is red?
								 want to use the mix-blend-mode:difference implementation in ccs3 to be red on a white background, but black on a red background.  only this effect is close to ...
								
									
																														Javascript
																				css3
																				css
																				front-end
																			
									
										Apr.01,2022
									
								
							
														
								Can scss support dynamically passing parameters like the js method?
								
 for example, I use scss to define a style class: 
.w{x}px: {
    width:{X}px;
}

 write code directly 
<div class="w20px">
<div class="w25px">
<div class="w30px">
<div class="w40px">

 and ...
								
									
																														Javascript
																				less
																				sass
																				css
																				front-end
																			
									
										Apr.25,2022
									
								
							
														
								Set html {background-color:blue}, why can it cover the whole page? the height of < html > is not so high.
								

<html>height8px(8pxbody) 


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin< title>
< head>
<body>
 
< body>
< html>
 * 
    
    <html>height8px(8p...
								
									
																														Html
																				css
																				front-end
																			
									
										Jun.13,2022
									
								
							
														
								In taobao.com, how is the margin between these two boxes generated?
								
,marginpadding:
<div class="core J_core">< div>
<div class="sub-column">< div>
  
...
								
									
																														Html
																				css
																				front-end
																			
									
										Jun.21,2022


				
					
						
	
						
		css
		mysql
		arrays
		josn
		react
		html
		typescript
		webpack
		npm
		sass
		R
		objective-c
		.net
		sql-server
		jquery
		python-3.x
		angularjs
		django
		angular
		excel
		regex
		iphone
		ajax
		linux
		xml
		pandas
		vba
		spring
		database
		wordpress
		string
		wpf
		xcode
		windows
		bash
		postgresql
		oracle
		multithreading
		eclipse
		list
		firebase
		algorithm
		macos
		forms
		image
		scala
		visual-studio
		azure
		bootstrap
		spring-boot
		react-native
		python-2.7
		docker
		performance
		function
		winforms
		matlab
		powershell
		apache
		dataframe
		api
		sqlite
		numpy
		rest
		shell
		selenium
		flutter
		dart
		maven
		loops
		qt
		swing
		android-studio
		csv
		express
		file
		class
		tensorflow
		sorting
		codeigniter
		perl
	
						MySQL Query :  SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5 
 MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4c97f-43bef.MAI); waiting for someone to free some space... (errno: 28 "No space left on device") 
 MySQL Errno : 1021 
 Message :  Disk full (/tmp/#sql-temptable-64f5-1e4c97f-43bef.MAI); waiting for someone to free some space... (errno: 28 "No space left on device") 
Need Help?