我有一个带有一些填充的包装器,然后我有一个具有百分比宽度(40%)的浮动相对div.

在浮动的相对div中,我有一个固定的div,我希望它的大小与其父目录的大小相同.我知道从文档流中删除了固定的div,因此忽略了包装器的填充.

HTML

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

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/

有没有人知道有什么方法可以做到这一点?

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/

推荐答案

你可以用保证金来支付.包装容器,而不是填充.包装器:

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

Css相关问答推荐

在React中使用Tailwind自定义组件着色

在主零部件悬停上对子零部件设置Angular 样式

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%,如果溢出,还可以zoom 父元素

下拉菜单未展开- bootstrap

根据子索引计算变换 CSS 参数

在 CSS 中,如何用破折号填充段落中每一行的空白区域?

在变量中存储匹配 Select 器的子元素的计数

根据选项 colored颜色 更改 Select 文本 colored颜色

当我在几个月之间更改时,有什么方法可以在react-dates-range上添加淡入淡出或幻灯片效果?

Twitter Bootstrap:进度条居中文本

使用 HTML 和 CSS 滚动表格

固定元素在 Chrome 中消失

如何通过 JavaScript 重新触发 WebKit CSS 动画?

在 css 中使用 FontAwesome 或 Glyphicons :before

如何动态生成用逗号分隔的类列表?

如何仅使用 CSS 制作网格(如方格纸网格)?

输入和文本字段中的背景 colored颜色

使用 :focus 设置外部 div 的样式?

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

如何复制 iOS 上固定的后台附件