Question

我正在构建一个固定宽度的站点，970px，居中，渐变为环绕声。最初固定宽度部分是白色的，具有几个具有不同背景的水平区域（菜单，搜索区域，产品选择区域）。这是使用白色的背景颜色完成的，div是身体的下一个孩子，包含页面的所有内容，并在需要时覆盖背景颜色。这很好。

我可以让这些水平区域与渐变具有相同的背景，这在页面的不同位置显然会有所不同吗？我想我会简单地保持背景颜色透明（默认）在所有级别，直到我来到我想要白色的内容的父级，使父母的背景颜色#FFFFFF。如果我指定区域的高度，这是有效的。但是，网站的主体将具有不确定的高度，并且必须是白色的（或者除了渐变之外的其他东西！）。是否有任何技术可以将元素及其内容强制转换为白色背景而不指定该元素的高度？

感谢。

感谢您的回复。我应该用代码澄清，以便问题清楚。对不起。

以下是说明问题的示例HTML：

<body>
<div id="Page">
    <div id="Header">
        <div id="HeaderNavigationSection">
            <div id="HeaderNavigationMenu">
                <ul>
                    <li><a href="#">Menu Item One</a></li>
                    <li><a href="#">Menu Item Two</a></li>
                </ul>
            </div>
        </div>
        <div id="HeaderBannerSection">
            <a href="#">
                <img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
            </a>
            <p id="BannerSloganOne">Banner Slogan One Text</p>
            <p id="BannerSloganTwo">Banner Slogan Two Text</p>
        </div>
        <div id="HeaderSearchSection">
            <div class="HeaderSearchSectionLine">
                <p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
            </div>
            <div class="HeaderSearchSectionLine">
                <p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
            </div>
        </div>          
    </div>
</div>
</body>

首先，这里的CSS是有效的，使用页面级白色背景颜色和不同背景颜色的部分级别（黄色用于说明）。这适用于我的代码。我没有显示任何重置或基本设置。请注意，不需要#HeaderBannerSection的注释掉的CSS（它出现在不起作用的代码中，在此代码之后显示）。

html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}

body {
text-align: center;}

#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}

#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}

#HeaderNavigationMenu {
display: inline;
float: right;}

#HeaderNavigationMenu li {
display: inline;
float: left;}

#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}

#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}

#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}

#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}

#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}

#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}

.HeaderSearchSectionLine {
clear: both;}

.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}

以下是对CSS的更改，尝试通过透明度将html级背景颜色（即渐变）设置为默认值，除非在需要的地方特别重写（在此示例中为#HeaderBannerSection）以上根据需要评论））：

#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}

#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}

。。

#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}

。。

#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}

此代码不起作用。应该是白色的部分的背景颜色仍然是渐变。除非我为该部分指定高度，否则这一切都是正确的。但是我不能指定主要部分的高度（未显示），除非我做一个jQuery来确定渲染高度然后做一个jQuery css高度设置（不理想，甚至没有尝试过）它还没有看它是否有效）。顺便提一句，违规代码在IE6和IE7中起作用（至少在Expression Web 4 SuperPreview中呈现）。

再次感谢您给我的任何帮助。

Answer 1

对于您的横幅广告部分，请尝试this jsfidle

min-width属性强制div具有特定的最小宽度，如果其中的内容不足以填充它（默认情况下它将是指定的宽度，直到其中的内容太多以至于div必须展开）

我更改了背景颜色，以便您可以看到实际的div @ work 一旦你确定你已经弄错了，就可以随时改为#FFFFFF。

没有高度的背景颜色

1 个答案: