好吧,我明白DIV的目的是遏制其内在元素 - 我不想通过另外说话来打扰任何人。但是,请考虑以下情形:
我的网页(仅占整个页面宽度的70%)被一个容器(div)包围。但是,在我页面顶部的导航栏下,我想创建一个占用整个页面宽度100%的横幅(这意味着它必须扩展到其容器的边界之外作为容器只占页面宽度的70%。
这是我想要完成的基本想法:http://www.petersonassociates.biz/
有没有人对我如何做到这一点有任何建议?我很感激任何帮助。
埃文
如果我理解正确,
style="width: 100%; position:absolute;"
应该实现你的目标。
如果您只是希望元素的背景在整个页面上延伸,那么也可以使用负边距来实现。
简而言之(评论更正):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
这为您提供了水平滚动条,您可以删除它:
body {overflow-x: hidden; }
http://www.sitepoint.com/css-extend-full-width-bars/有一个指南。用psuedo元素执行此操作可能更具语义性:http://css-tricks.com/full-browser-width-bars/
有几种方法可以做到这一点。
绝对定位 像其他人所建议的那样,如果你想要在页面上提供100%宽度和绝对位置的CSS属性,它将跨越页面的整个宽度。
但是,它也会位于页面顶部,可能会遮挡您的其他内容,这不会为您现在的100%内容腾出空间。绝对定位会从文档流中删除元素,因此它将表现为新定位的内容不存在。除非你准备好准确计算你的新元素应该在哪里并为它腾出空间,否则这可能不是最好的方法。
图像:你也可以使用一组图像来获得你想要的东西,但祝你好运更新它或改变页面任何部分的高度,等等。再次,不太适合可维护性。
嵌套DIV 这就是我建议你这样做的方式。在我们担心任何100%宽度的东西之前,我将首先向您展示如何设置70%居中的外观。
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
像这样的CSS:
.center {
width: 70%;
margin: 0 auto;
}
现在你的中心内容看起来像是一个容器,实际上在页面上移动的每一行内容由一个包含div的内容组成,带有语义和描述性类(如header,mainContent等),里面有一个“中心”课程。
有了这个设置,使标题看起来“突破容器div”就像这样简单:
.header {
background-color: navy;
}
并且颜色到达页面的边缘。如果由于某种原因您希望内容本身在整个页面中延伸,您可以执行以下操作:
.header .center {
width: auto;
}
并且该样式将覆盖.center样式,并使标题的内容扩展到页面的边缘。
祝好运!
这样做的语义更正确的方法是将标题放在主容器之外,避免使用position:absolute
。
例:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
另一种方法(将其保存在<section class="main-content">
中)就像你说的那样,不正确,因为div(或section)应该包含元素,而不是让它们超出其父div / section的范围。如果您的孩子div延伸到父div之外,您还将面临IE中的问题(我相信任何7或更低,但这可能只是IE6或更低)。
编辑(2019):有一个new trick使用这个CSS实用程序获得完全出血:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
我想所有解决方案都有点过时了。
逃避元素边界的最简单方法是添加:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
讨论可以找到here和here。即将到来的grid-layouts也有一个很好的解决方案。