Question

我是编码的新手，有一个我无法弄清楚的小问题。我定义了#wrapper div，允许我将内容放在页面上，并将背景颜色设置为白色（css中定义的背景颜色）。每当我将height属性设置为auto时，在呈现时我的页面顶部都有一个白色框，它似乎代表我在#wrapper属性中设置的填充定义。渲染时我的实际页面高度很好，这意味着所有内容都按预期显示，但是使白框延伸到页面底部以使整个背景为白色的唯一方法是输入固定的高度值。这就是我所拥有的：

#wrapper {
     width: 940px;
     height: auto;


    /* border-top: 1px solid #000000;
     border-right: 1px solid #000000;
     border-bottom: 1px solid #000000;
     border-left: 1px solid #000000; */

     margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
     margin-bottom: 10px;

     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-left: 20px;

     position: relative      
}

肯定赞赏任何帮助！

Answer 1

#wrapper {overflow: hidden}

OR

#wrapper {overflow: auto}

Answer 2

如果您希望#wrapper div扩展到页面底部，则需要提供明确的高度。 高度：自动将调整为仅适合内容。如果#wrapper是您的主页div的直接子项或者只是在您的正文下方，您可以将该父元素（正文或某个div）设置为100％或静态值，然后将#wrapper设置为该值的百分比像...

我不提倡内联样式!!只是一个例子

<body style="height: 480px">
    <div id="wrapper" style="height: 95%">
        content!
    </div>
</body>

身体也可以是一个百分比然后调整到窗口高度，可能会起作用，但可能不是你想要的，只是另一种选择。

自动高度不会扩展内容背景

2 个答案: