将相对 div 定位在另一个具有动态高度的相对 div 中

Question

我有一个简单的问题，让我浪费了两天时间，没有任何成功。我是 CSS 初学者，如果我问的问题很愚蠢，请见谅。

JSFiddle

• http://jsfiddle.net/0npx527e/

问题

我有一个包含三个主要 div 'header'、'contentContainer' 和 'footer' 的网页。在 contentContainer 中有一个名为“content”的 div。内容 div 应该包含多个部分（我使用 purecss 来表示网格中的每个部分）

一个部分应该包含两个 div 'divA' 和 'divB'。现在 'divA' 应该有动态高度，而 divB 应该有固定高度。这意味着如果我调整浏览器的大小，'divA' 应该与 c 部分一起调整大小。下面的截图直观地展示了我所描述的内容。

现在我不明白的是：

1. 为什么 'divB' 不在'section' div 的底部，虽然底部是 0？

2. 为什么我不能将“divA”定位在顶部/底部？它不起作用，所以我不得不用 height 属性定位它。

   .divA{
       position: relative;
       top: 0;
       bottom: 100px;
       ............
   }
   

   而不是

   .divA{
       position: relative;
       height: 85%;
       ...........
   }
   

   1. 为什么 'divB' 会出现在 'section' div 之外？这对我来说没有意义！ 'divA' 应该相对于'section' 定位，那么为什么它不尊重父 div 的边界呢？以下屏幕截图显示了我的意思。

• Note_1 我在某处读到我可以对两个 div 使用绝对定位而不是相对定位：“divA”和“divB”。但是，对于绝对定位，我将没有“divA”的动态高度

• Note_2 我不会在 'divA' 和 'divB' 中包含元素。只是背景颜色或图像。所以基本上我希望“部分” div 填充“内容”区域，尽管它没有具有指定高度的子项。

如果有人向我解释这种行为背后的原因，我将不胜感激。我认为使用 CSS 定位元素是合乎逻辑的，但事实证明它不是 ^^（我肯定错过了一些东西）

更新

感谢@Florian 的回答。我发现你的建议有一个问题。添加后

overflow:hidden;

按照您的建议，对于 contentContainer，“divB”位于“section”div 下。我想要实现的行为是“divB”应该在该部分中保持在相同高度“100px”的相同位置。 'divA' 应该随容器调整大小。 http://jsfiddle.net/oqe3bjxe/

如何解决这个问题？

关于你的答案，

1. 好的。
2. 读完“3”后我猜是有道理的
3. 我不确定孩子是否知道父母的宽度和高度。感谢您的澄清。
4. 为什么？使用相对定位有什么问题？
5. 为什么？

很抱歉问了很多问题。我真的很想明白。

如果不推荐使用相对位置，那么我想肯定有更好的方法来实现这一点。有人可以向我展示如何使用 JSFiddle 的最佳实践吗？

提前致谢， 特发

Answer 1

问题是你对 contentContainer 类没有高度。

您可以通过添加以下 CSS 来解决此问题：

.contentContainer{
    overflow:hidden;
}

有很多错误。

1.保证金：0自动，如果你有位置固定不起作用。

2. Position: relative 只取top 和left 属性，表示bottom 和right 不会影响它。

3. 如果您想为子元素提供 % 的高度，请确保您具有容器的高度（例如 1500 像素）。 % 将从父级的高度计算，如果您没有父级的高度，则不起作用。

4. 我不建议使用那么多位置：相对。使用容器的margin-top，您想要实现的目标更容易。

5.如果您有固定的页脚，请确保在正文中添加一些padding-bottom。

Answer 2

据我了解，您希望在部分内显示 divB。 为此，您需要对 css 进行一些更改。

.divA {
    background-color: green;
    max-width: 1000px;
    max-height: 1080px;
    height: 100%;
    position: relative;
    top: 0;
    margin: 0 7px 0 7px;
}

添加新的 CSS

.divA{
    margin-bottom: -100px;
}

.divB,
.divA:after {
    height: 100px;
}

Answer 3

我找到了解决方案。
当您在.section 上有position: relative; 时，其中的每个position: absolute; 都将相对于它定位，而不是相对于页面定位。

来自MDN：

亲戚：
这个关键字布局所有元素，就好像元素是 没有定位，然后调整元素的位置，不用 改变布局（从而为元素留下一个空白 如果它没有被定位）。位置效果：相对 在 table-*-group、table-row、table-column、table-cell 和 table-caption 元素未定义。

绝对：
不要为 元素。相反，将其定位在相对于 它最接近的祖先或包含块。绝对地 定位框可以有边距，它们不会与任何其他框一起折叠 边距。

我已经完成了fiddle。

.section {
    background-color: red;
    position: relative;
    bottom: 0;
    top: 0;
    height: 100%;
    /*put this uncommented if youll want the black box to minimize with the whole thing
    overflow: hidden*/
}

.divA {
    background-color: green;
    height: 85%;
    width: 100%;
    /*width: calc(100% - 14px); optional, works in some browsers, use with margin*/
    position: absolute;
    top: 0px;
    /*you can remove this if you don't want red visible
    margin: 0 7px;*/
}

.divB {
    background-color: black;
    position: absolute;
    bottom: 0px;
    height: 100px;

    width: 100%;
    /*width: calc(100% - 14px); optional, works in some browsers, use with margin*/
    background-color: black;
    /*you can remove this if you don't want red visible
    margin: 0 7px;*/
}

你有两个选择，取消注释

• overflow: hidden; 会在 .section 小于 100px 时最小化黑框；
• width: calc(...); margin: 7px 0px; 会使框变小，使红色可见。

测试一下。我希望我已经回答了你的问题。

编辑：哦，我完全忘记了height: 85%; 属性，当然，正如@RMo 所指出的，当.section 的高度超过666px 时它不起作用。
将 height: 85%; 替换为 bottom: 100px 或 使用 calc(): height: calc(100% - 100px);。

我是 calc() 的忠实粉丝。虽然，all browsers 不支持，但差不多。

如果它帮助你理解一些 CSS，请告诉我，@TeFa。 :)

Answer 4

我又从头开始了。我使用基于顶部、底部、右侧、左侧、高度和宽度值的固定位置。对于黄色 div，我只使用了顶部和底部值。这将导致容器适应调整浏览器的大小。其他容器都具有固定的高度。请注意，对于固定位置，div 在 html 中的位置并不重要。最后，我使用边距放置内容以避免固定元素。查看代码，您应该可以弄清楚：JSFiddle

我希望这是您正在寻找的（因为我不是 100% 确定您想要什么）。我想我很快就会听到：)。

简化的 HTML

<div id="header"></div>
<div id="content">
    <div id="dummytext"></div>  
</div>
<div id="divA"></div>
<div id="divB"></div>
<div id="footer"></div>

CSS

#header{/*changed closing tags in html to: <div id="header"></div>*/
    position: fixed;
    top: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    background-color: blue;
    border-bottom: white solid 20px;
}
#divA{ 
    position: fixed;   
    bottom: 170px; /*no height but top/bottom values so containers height changes based on browsersize*/
    top: 70px;
    left: 0px;
    right: 50%;
    background-color: yellow;
}
#divB{
    position: fixed;   
    bottom: 70px;
    height: 100px;
    left: 0px;
    right: 50%;
    background-color: red;

}
#footer{
    position: fixed;
    bottom: 0px;
    height: 50px;
    left: 0px;
    right: 0px;
    background-color: blue; 
    border-top: white solid 20px;
}
#content{
    margin: 70px 2% 70px 55%; /*margins to place scrollable content avoiding fixed content to appear on top of the content*/ 
}
#dummytext{/*Just some dummy text to see what happens with scrollbar*/
    height: 1000px;
    width: 100%; 
    background: linear-gradient(red, orange, yellow, green, blue);/*all colors of the rainbow, just because..*/
}

Answer 5

有很多答案。 我的答案不是真正的答案，但是当我开始时，提示对我有很大帮助。您是否尝试过 reset.css 之类的方法？每个浏览器都有不同的默认值，它会将 css 的所有属性设置为零，因此您最终可以编写自己的 css。

您只需将它包含在您的 css 文件之前。

好像是这样

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

原网址是here。

希望对你有所帮助.. ^^