Html 自动高度不扩展内容背景_Html_Css_Height

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

html css

Html 自动高度不扩展内容背景,html,css,height,Html,Css,Height,我对编码还不熟悉，有一个小问题我想不出来。我定义了一个#wrapper div，允许我将内容集中在页面上，并将背景颜色涂成白色（背景颜色在css中定义）。每当我将height属性设置为auto时，渲染时页面顶部就会有一个白色框，它似乎表示我在#wrapper属性中设置的填充定义。渲染时，我的实际页面高度很好，这意味着所有内容都按预期显示，但要使白色框延伸到页面底部，使整个背景为白色，唯一的方法是输入一个固定的高度值。以下是我所拥有的： #wrapper { width: 940px;

我对编码还不熟悉，有一个小问题我想不出来。我定义了一个

#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      
}

感谢您的帮助

#wrapper {overflow: hidden}

或

如果希望#wrapper div扩展到页面底部，则需要提供明确的高度height:auto将仅调整以适合内容。如果#wrapper是主页div的直接子元素，或者正好位于主体下方，则可以将父元素（主体或某些div）设置为100%或静态值，然后将#wrapper设置为该值的百分比，如

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

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


内容！

正文也可以是一个百分比，然后根据窗口高度进行调整，可能有效，但可能不是您想要的，只是另一个选项。

可能重复的“自动”意味着“自动”–仅在实际内容要求的范围内。您是否也可以发布html或创建

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