Question

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

的jsfiddle

http://jsfiddle.net/0npx527e/

问题

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

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

Webpage example

现在我不明白的是：

为什么'divB'不在'section'div的底部，尽管bottom是0？
为什么我不能用顶部/底部定位'divA'？它没有用，所以我不得不用高度属性来定位它。
```
.divA{
    position: relative;
    top: 0;
    bottom: 100px;
    ............
}
```
而不是
```
.divA{
    position: relative;
    height: 85%;
    ...........
}
```
1. 为什么'divB'超出'section'div？这对我来说没有意义！ 'divA'应相对于'section'定位，那为什么它不尊重父div的边界？以下截图显示了我的意思。

Overlapping Parent Div

Note_1 我在某处读到了我可以使用绝对定位而不是两个div的相对定位：'divA'和'divB'。但是对于绝对定位，我不会为'divA'
Note_2 我不会在'divA'和'divB'中包含元素。只是背景颜色或图像。所以基本上我希望'section'div填充'content'区域，尽管它没有指定高度的子项。

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

更新

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

overflow:hidden;

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

Section is overlapping 'divB'

如何解决这个问题？

关于你的答案，

确定。
读完“3”后我猜错了。
我不确定孩子是否知道父母的宽度和身高。谢谢你澄清。
为什么？使用相对定位有什么问题？
为什么？

很抱歉提出很多问题。我真的很想了解。

如果不建议使用相对位置，那么我猜有一个更好的方法来实现这一点。有人可以告诉我使用JSFiddle如何做到这一点的最佳实践吗？

先谢谢，特发

Answer 1

问题是你没有到contentContainer类的高度。

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

.contentContainer{
    overflow:hidden;
}

有很多错误。

1。保证金：0自动，如果您的位置已修复，则无效。

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

3. 如果要给出子元素的高度％，请确保您有容器的高度（例如1500px）。％将根据父母的身高进行计算，如果您没有父母的身高，那么他/她将无法工作。

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

5. 如果您有固定的页脚，请务必向正文添加一些padding-bottom。

Answer 2

我找到了解决方案。
如果position: relative;上.section position: absolute;，则其中的每个.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;*/ }都会相对于它定位，而不是分页。

来自MDN：

亲戚：
  此关键字列出了所有元素，就像元素一样   没有定位，然后调整元素的位置，没有   改变布局（从而为元素留下空隙   一直没有定位）。位置的影响：相对   在表 - * - 组，表行，表 - 列，表 - 单元格和   表格标题元素未定义。

  绝对：
不要留空间   元素。而是将其定位在相对于的指定位置   它最接近的祖先或包含块。绝对   定位的盒子可以有边缘，它们不会与任何其他盒子一起倒塌   边距。

我做了fiddle。

overflow: hidden;

您有两个选项，取消注释

width: calc(...); margin: 7px 0px;将最小化黑盒;
height: 85%;会使框变小，以便可见红色。

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

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

我是calc（）的忠实粉丝。虽然all browsers不支持，但几乎不支持。

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

Answer 3

据我了解你的问题，你想在部分内显示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 4

我有点从头开始了。我使用基于顶部，底部，右侧，左侧，高度和宽度值的固定位置。对于黄色div我只使用了顶部和底部值。这将导致容器适应调整浏览器的大小。其他容器都有固定的高度。请注意，在固定位置的html中，div完全无关紧要。最后，我使用边距放置内容以避免固定元素。查看代码，您应该能够弄清楚： 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 5

有很多答案。我的回答不是真正的答案，但是当我开始时，提示对我很有帮助。你尝试过reset.css之类的东西吗？每个broswer都有不同的默认值，它将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。

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

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

5 个答案: