Html 100%高度中心部分仅使用CSS_Html_Css

Html 100%高度中心部分仅使用CSS

html css

Html 100%高度中心部分仅使用CSS,html,css,Html,Css,这是我做的JS小提琴：结构与我的网站使用的完全相同，但问题是我没有让我的网站中间部分达到100%的高度。现在是内容决定了它有多高 <body> <div id="page-container"> <header></header> <div id="page-wrapper"> <div id="page-content"> <

这是我做的JS小提琴：

结构与我的网站使用的完全相同，但问题是我没有让我的网站中间部分达到100%的高度。现在是内容决定了它有多高

<body>
    <div id="page-container">
        <header></header>

        <div id="page-wrapper">
            <div id="page-content">

            </div>
        </div>

        <footer></footer>
    </div>
</body>

html, body { height: 100%; padding: 0; margin: 0; }

header {    width: 100%;    height: 50px;    background-color: red; }

footer { width: 100%; height: 50px; position: absolute; bottom: 0; background-color: green; }

#page-wrapper { width: 1024px; margin: 0px auto; background-color: yellow; }
#page-content { height: 100%; background-color: pink; }


html，正文{高度：100%；填充：0；边距：0；}
标题{宽度：100%；高度：50px；背景色：红色；}
页脚{宽度：100%；高度：50px；位置：绝对；底部：0；背景色：绿色；}
#页面包装{宽度：1024px；边距：0px自动；背景色：黄色；}
#页面内容{高度：100%；背景颜色：粉红色；}

我不是100%确定我知道你的意思，但是你是否尝试过将高度：100%添加到页面包装div中

#page-wrapper{ 
 height:100%;
 width: 1024px; 
 margin: 0px auto; 
 background-color: yellow;
}

我以前遇到过这个问题。我的看法是，当您指定

高度时：100%，它填充到100%的div（或任何元素）-但不填充到屏幕大小。我总是不得不在某个地方使用minheight
来获得与您所寻求的类似的结果
对于正文或您的页面包装
div，请尝试指定min height:500px（或任何您认为合适的大小。
制作页面容器
height: 100%;

让里面的物体知道盒子的大小
这样就可以制作页面包装器了
position: absolute;
bottom: 50px;
top: 50px;
height: auto; /*can also be left away*/

现在中间部分将位于页脚和页眉之间

您可以使页面内容
height: 100%;

或者你可以把它拿走，就像你想的那样