2

我刚刚进入 HTML 和 CSS，我有一个快速的问题。有没有办法让父元素的大小变大以容纳它的一个子元素？我设置了背景<html>。然后在正文中，我有一个 div，它设置了不同的背景颜色，并且不像整个页面那样宽/高。这留下了两种色调的设计。然后，我有一个嵌套的 div，其中包含要显示的所有内容。这一切都很好，除非页面内容足够需要滚动条。如果发生这种情况，两种背景颜色都会在屏幕的原始底部消失。这个问题非常烦人，从我读过的内容来看，没有很好的方法来处理它，但我想看看是否有人知道。我设置了以下属性：

html {
    background: [gradient code...]
    height: auto;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}

body {
    height: auto;
    width: 100%;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

div.background {
    background-color: #D0D0D0;
    text-align: center;
    height: auto;
    width: 70%;
    position: absolute;
    top: 150px;
    bottom: 30px;
    left: 15%;
    margin: 0;
    padding: 0;
    border-radius: 7px;
}

div.container {
    height: auto;
    width: 70%;
    position: absolute;
    left: 15%;
    bottom: 0;
    top: 0;
}

Wherediv.background具有第二个背景颜色，并div.container在页面上显示内容。

谢谢你的帮助。

4

3 回答 3

3

不使用position: absolute怎么办？删除它（以及相关的top, left, bottom...）并用正确的边距替换它们。

于 2012-07-26T19:51:29.073 回答
1

我相信如果您在父项上指定大小（宽度，高度）自动（或者只是不指定大小而将其保留），它会增长/缩小以适合孩子的大小（它不能递归工作，所以您可能想要上升到树中的最后一个父级）。避免绝对定位（http://www.w3schools.com/Css/css_positioning.asp）也可以解决问题，浮动元素或不同的 z-index 也可以解决问题，但我认为父级过度增长。 ..

于 2012-07-26T19:51:34.697 回答
0

如果您摆脱绝对 div.background 的宽度和位置并将绝对位置更改为 div.container 的相对位置，您应该会很好

于 2012-07-26T19:52:49.213 回答