87

我有一个带有一些填充的包装器，然后我有一个具有百分比宽度（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/

有谁知道实现这一目标的方法？

我已经修改了小提琴以显示有关我要完成的工作的更多详细信息，很抱歉造成混淆：http: //jsfiddle.net/EVYRE/4/

4

7 回答 7

41

您可以使用 .wrap 容器的边距而不是 .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

于 2013-07-23T10:12:21.707 回答
8

尝试向父级添加一个变换（不必做任何事情，可以是零平移）并将固定子级的宽度设置为 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}
<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

于 2017-12-12T15:09:33.693 回答
2

这个怎么样？

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

通过使用 jquery，您可以设置任何类型的宽度 :)

编辑：正如评论中的梦想所说，仅仅为了这种效果使用 JQuery 是没有意义的，甚至会适得其反。我为那些在页面上使用 JQuery 的人制作了这个例子，并考虑在这部分也使用它。对于我的回答给您带来的任何不便，我深表歉意。

于 2013-07-23T09:58:15.527 回答
1

您可以使用绝对定位将页脚固定到父 div 的底部。我还在包装中添加了 10px padding-bottom（与页脚的高度匹配）。绝对定位是相对于父 div 而不是流之外的，因为您已经为其赋予了 position relative 属性。

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

}

http://jsfiddle.net/C93mk/497/

于 2013-07-23T11:15:14.513 回答
1

你的容器是父元素宽度的 40%

但是当您使用位置：固定时，宽度基于视口（文档）宽度......

想一想，我意识到你的父元素有 10% 的填充（左右），这意味着你的元素有 80% 的总页面宽度。所以你的固定元素必须有 40% 基于总宽度的 80%

所以你只需要将你的#fixed 类更改为

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

如果您使用 sass、postcss 或其他 css 编译器，则可以使用变量来避免在更改父元素的填充值时破坏布局。

这是更新的小提琴http://jsfiddle.net/C93mk/2343/

我希望它有帮助，问候

于 2016-12-01T17:50:57.443 回答
0

在你最新的jsfiddle 之上，你只是错过了一件事：

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

但是，这将如何解决您的问题？很简单，让我们先解释一下为什么比预期的要大。

固定元素#sidebar将使用窗口宽度大小作为基础来获得自己的大小，就像其他所有固定元素一样，一旦在此元素中定义width:inherit并#sidebar_wrap具有 40% 作为宽度值，然后将计算window.width * 40%，然后当您的窗口宽度大于您的.container宽度，#sidebar将大于#sidebar_wrap。

这样，您必须在 , 中设置一个最大宽度#sidebar_wrap，以防止大于#sidebar_wrap.

检查这个显示工作代码的jsfiddle并更好地解释它是如何工作的。

于 2016-10-16T20:46:15.813 回答
-3

删除Padding: 10%;或使用px而不是percent for.wrap

看例子：http: //jsfiddle.net/C93mk/493/

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: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}
于 2013-07-23T10:01:12.340 回答