gpt4 book ai didi

html - 全高 CSS 列

转载 作者:行者123 更新时间:2023-11-28 19:06:16 26 4
gpt4 key购买 nike

我有以下 HTML 来构建一个 900 像素宽的居中页面,其中包含页眉、页脚和内容部分:

<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>

布局使用以下(大约)CSS 设置样式:

html, body
{
height: 100%;
}

#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}

#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

#header
{
}

#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}

#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}

CSS 最初基于我在互联网上找到的“粘性页脚”布局。它与粘性页脚配合得很好,但后来我遇到了这些问题:

1) “内容”永远不会拉伸(stretch)到全尺寸。这是我的一些页面上的一个大问题,因为内部控件的高度设置为 100%。由于内容未拉伸(stretch),因此控件显示全部被挤压。

2) 我刚刚添加了背景图像和颜色。此背景不应显示在中间的内容 Pane 中。因为“内容”没有完全拉伸(stretch),所以背景图片显示在错误的位置。

我更喜欢仅针对此的 CSS 修复(即没有 hack 或 JS)。有帮助吗?

最佳答案

我希望删除#mainMaster <div>并将其背景图片移动到#main 的 CSS 中可以解决您的问题:

<body>    
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>

您遇到的问题是#main 的父级 (#mainMaster) 没有明确声明高度。百分比高度仅在父元素定义了高度时才能正常工作。

关于html - 全高 CSS 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3300814/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com