Question

无法弄清楚为什么它太高了，抱歉：

html {
    min-height:100%;
    position:relative;
}

body {
    height:100%;
    background-color:darkblue;
    background-image:url(background.png);
    background-repeat:repeat-y;
    background-position:center center;
    background-size:100% 100%;
    padding:0;
    margin:0;
}

#wrapper {
    width:65%;
    top:0; bottom:0; right:0; left:0;
    background-color:#bad6e8;
    border:2px solid black;
    padding:0;
    margin: 0 auto;
}

#header {
    width:100%;
    height:10%;
    background-color:#bad6e8;
    border-bottom:2px solid black;
    padding:2px;
}

#user {
    width:25%;
    height:250px;
    background-color:#bad6e8;
    border-right:2px solid black;
    border-bottom:2px solid black;
    float:left;
    padding:2px;
}

#menu {
    width:100%;
    height:35px;
    background-color:#bad6e8;
    border-bottom:2px solid black;
    padding:2px;
    margin-bottom:2px;
}

#content {
    width:100%;
    height:100%;
    background-color:lightblue;
}

和

<html>
    <head>
        <title>Playdux</title>
        <link rel="stylesheet" type="text/css" href="design.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                Header
            </div>
            <div id="content">
                <div id="user">
                    Usermenu
                </div>
                <div id="menu">
                    Menü
                </div>
                Content
            </div>
        </div>
    </body>
</html>

“wrapper”div应该从页面顶部一直到底部。停在那里，除非它有足够的内容超越它。

但是，如果没有足够的内容，它就会超越极限。我的CSS现在搞砸了，因为我一直想弄清楚。

Answer 1

要将wrapper从上到下延伸，您必须position: absolute或position: fixed

#wrapper {
    width:65%;
    position: absolute;
    top:0; bottom:0; right:0; left:0;
    background-color:#bad6e8;
    border:2px solid black;
    padding:0;
    margin: 0 auto;
}

您还必须从content删除height: 100%。因为这被解释为包含块的100％，在这种情况下为wrapper

#content {
    width:100%;
    background-color:lightblue;
}

查看完整的JSFiddle

另一种方法是放弃top:0; bottom:0; right:0; left:0;，只做height: 100%

html, body {
    height: 100%;
}

#wrapper {
    height: 100%;
}

查看另一个JSFiddle

Div超出了页面限制

1 个答案: