将Fixed div设置为父容器的100％宽度 [英] Set a Fixed div to 100% width of the parent container

问题描述

我有一个包装器有一些填充，然后我有一个浮动相对div与百分比宽度（40％）。

I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).

在浮动相对div中，我有一个固定的div，我想要它的父级相同的大小。我理解，固定的div从文档的流中删除，因此忽略了包装的填充。

Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

这是必须的小提琴： http://jsfiddle.net/C93mk/489/

有没有人知道有办法做到这一点？

Does anyone know of a way to accomplish this?

我修改了小提琴以显示更多有关我想完成的事项， href =http://jsfiddle.net/EVYRE/4/> http://jsfiddle.net/EVYRE/4/

I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion: http://jsfiddle.net/EVYRE/4/

推荐答案

你可以使用.wrap容器的margin而不是.wrapper的填充：

You can use margin for .wrap container instead of padding for .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

这篇关于将Fixed div设置为父容器的100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！