如何在html/css中制作一个有限尺寸的跨页面背景

-1

我是一位自学的编码员，为我创建的非营利组织开发网站，并希望有一个页脚来感谢上述非营利组织的赞助商。我试图通过相对于我的网页其余部分更改其背景颜色来区分此部分和网站的其他部分。我试过了我能想到的所有东西，比如创建一个宽度为100％，背景颜色不同的div/footer，但只为包含文本的div部分添加背景颜色（文本看起来像用这种颜色突出显示，而不是应用于整个div的纯色背景）。我所有的研究结果都只能说明如何让页面的整个背景成为特定的颜色，或者如何将样式添加到水平线上，这两者都不能帮助我（前者是因为我想让颜色与该颜色不同而后者则是因为我无法将我想包括的内容/文本放在其上）。如果任何人都可以提供帮助，我们将非常感谢。谢谢！如何在html/css中制作一个有限尺寸的跨页面背景

编辑：澄清已被要求。基本上，我为我的网站创建了一个页脚，我想看起来像是一个here，其底部横跨页面。我的问题是，我创建的div没有足够好地使页面成为一个坚实的栏。它更像是一种块状着色，只在包含文本的嵌套div中出现。我发布了这个问题，因为我无法找到任何关于如何用这样的页脚跨越页面的指南，但添加了一个嵌套的div与我想要的颜色背景和100vm的宽度，将边距设置为0，并且隐藏溢出最终让我完成我的意图。希望这是足够的澄清。我也很感激，如果我积累的downvote被删除，或至少解释;很难提高我的帖子，如果我不知道他们的问题

来源

2017-01-08 Bugsy

如果没有您的问题的视觉示例，很难分辨确切的问题。但从它的声音来看，您希望背景能够扩展整个页面的宽度，但不希望实际内容扩展整个宽度。为了做到这一点，我将引入一个类，它表示你希望你的内容的宽度，并把这个类嵌套在你想要父类的页脚（和页面上的任何其他元素）内（即，页脚）来扩展页面的宽度，并且页脚内的所有内容都包含在希望显示内容的宽度内。下面是一个例子，其中我指的是.viewport。为footer指定背景并在footer中嵌套.viewport将为页脚提供全角背景，同时将页脚内嵌入的文本保留指定的宽度。

body { 
 
    margin: 0; 
 
} 
 
header { 
 
    background: #eee; 
 
} 
 
.viewport { 
 
    max-width: 960px; 
 
    width: 90%; 
 
    margin: auto; 
 
} 
 
footer { 
 
    background: #171717; 
 
    color: #fff; 
 
} 
 
.section { 
 
    padding: 2em 0; 
 
}

<header class="section"> 
 
    <h1 class="viewport"> 
 
    This is a header 
 
    </h1> 
 
</header> 
 
<main class="section"> 
 
    <div class="viewport"> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    <p>hello world</p> 
 
    </div> 
 
</main> 
 
<footer class="section"> 
 
    <p class="viewport">This is a footer</p> 
 
</footer>

来源

2017-01-08 18:17:46

太棒了，谢谢！出于好奇，为什么.viewport的宽度是90％而不是100％？它似乎不会跨越页面，但它的作品 – Bugsy

@Bugsy，因为这是包装页面内容的元素。如果它是100％，那么一旦你获得<960px的内容，它的内容会碰撞到浏览器的两侧，而且看起来很糟糕，但是你可以放任何你想要的东西。我仅以960像素/ 90％为例。 –

这里是你速战速决：

HTML

<div class="Footer"> 
    <div class="Content">Place you stuff here</div> 
</div>

CSS

.Footer{position:relative; width:100%; height:100px; display:block; float:left; background-color:RED;} 
.Footer > .Content{position:relative; margin:auto; width:80%; height:100%;}

来源

2017-01-08 18:15:18

最好最简单的解决方案是使用bootstrap，但由于您没有提及它，这意味着您没有使用它。

<footer> 
    <div class="sponsors"> 
     Type anything you want 
    </div> 
</footer>

CSS：

.sponsors{ 
text-align:center; 
background-color:(your color); 

}

这应该工作，如果不告诉我哪里出了问题！

来源

2017-01-08 18:16:22 evans

谢谢！我认为我的问题是我直接向页脚添加赞助商，而不是拥有一个包含div的页面。 – Bugsy

如何在html/css中制作一个有限尺寸的跨页面背景

回答

相关问题