将动态高度的相对div定位到另一个相对格

Question

我有一个简单的问题，使我浪费了两天而没有任何成功。我是一名CSS初学者，所以如果我提出一些愚蠢的问题，请原谅。

的jsfiddle

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

问题

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

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

现在我不明白的是以下几点：

1. 为什么 'DIVB' 不在 '节' 的底部div的底部虽然是0？

2. 为什么我不能将'divA'放在顶部/底部？它没有工作，所以我不得不把它放在高度属性。

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

   代替

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

3. 为什么 'DIVB' 走 '部分' DIV外？这对我来说没有意义！ 'divA'应该相对于'section'来定位，为什么它不尊重父div的边界？以下截图显示了我的意思。

• Note_1我读的地方，我可以用绝对定位，而不是相对定位两者的div： '耍大牌' 和 'DIVB'。然而，绝对定位我不会有'divA'的动态高度

• Note_2我不会有'divA'和'divB'中的元素。只是背景颜色或图像。所以基本上我想'节'div来填充'内容'区域，虽然它没有指定高度的孩子。

请，如果有人向我解释此行为背后的原因，我真的很感激。我想用CSS定位元素将是合乎逻辑的，但事实证明，它不是^^（我失踪肯定的东西）

UPDATE

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

overflow:hidden; 

后的contentContainer喜欢你的建议，“DIVB”就是“节” DIV去下。我想要达到的行为是'divB'应该保持在相同高度“100px”的位置。 'divA'应该调整容器大小。 http://jsfiddle.net/oqe3bjxe/

如何这个问题能解决？

关于你的答案，

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

对不起，提出了很多问题。我真的很想明白。

如果不建议使用相对位置，那么我想肯定有更好的方法来实现这一点。有人可以让我看看使用JSFiddle的最佳实践如何做到这一点？

由于事先 特发

Answer 1

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

我希望这是你在找什么（因为我不是100％确定你想要什么）。我想我会很快听到:)。

Simpliefied 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 2

的问题是，你没有一个高度的contentContainer类。

您可以添加以下CSS解决这个问题：

.contentContainer{ 
    overflow:hidden; 
} 

有很多错误。

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

2.位置：相对只需要顶部和左侧的属性，这意味着底部和右侧不会影响它。

3.如果要给出子元素的百分比高度，请确保您具有容器的高度（例如1500px）。 ％将根据父母的高度进行计算，并且如果父母没有高度，则无法工作。

4.我不会推荐使用那么多的位置：相对。使用容器的margin-top可以更容易实现。

5.如果你有一个固定的页脚，确保你补充一些padding-bottom身体。

Answer 3

我已经找到了解决办法。
当你有position: relative;在.section，它里面的每个position: absolute;将相对于它定位，而不是页面。

从MDN：

相对：
此关键字勾画出的所有元素，就好像元件被 没有定位，然后调整元件的位置，而不 改变布局（并因此留下了它会在 已被定位的元素的差距）。位置的影响：相对 对表 - * - 组，表行，表 - 列，表格单元和 表标题元素未定义。

绝对：
不要留下空间为 元素。相反，将其定位在相对于其最接近的定位祖先或包含块的 的指定位置。绝对地 定位框可以有边距，它们不会与任何其他 边距合拢。

我已经完成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，但差不多。

让我知道，@TeFa，如果它帮助你了解一些CSS。 :)

Answer 4

有很多答案。 我的答案不是真正的答案，但是当我开始的时候，提示可以帮助我很多。你试过类似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。

希望能帮助你一点点.. ^^

Answer 5

当我明白你的问题，你要课里面显示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; 
}