好吧,我知道 DIV 的目的是包含其内部元素 - 我不想说其他话让任何人不高兴。但是,请考虑以下情况:
我的网页(仅占整个页面的 70% 的宽度)被一个容器(一个 div)包围。但是,在页面顶部的导航栏下,我想创建占整个页面宽度 100% 的 w 横幅(这意味着它必须延伸到其容器的边界之外,因为容器仅占页面宽度的 70%)。
这是我试图完成的基本想法:http ://www.petersonassociates.biz/
有人对我如何做到这一点有任何建议吗?我会很感激任何帮助。
埃文
好吧,我知道 DIV 的目的是包含其内部元素 - 我不想说其他话让任何人不高兴。但是,请考虑以下情况:
我的网页(仅占整个页面的 70% 的宽度)被一个容器(一个 div)包围。但是,在页面顶部的导航栏下,我想创建占整个页面宽度 100% 的 w 横幅(这意味着它必须延伸到其容器的边界之外,因为容器仅占页面宽度的 70%)。
这是我试图完成的基本想法:http ://www.petersonassociates.biz/
有人对我如何做到这一点有任何建议吗?我会很感激任何帮助。
埃文
如果您只想让元素的背景延伸到整个页面,这也可以通过负边距来实现。
简而言之(评论更正):
.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/有一个指南。使用伪元素执行此操作可能更具语义:http: //css-tricks.com/full-browser-width-bars/
编辑(2019 年):使用此 CSS 实用程序获得全流血 的新技巧:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
我想所有的解决方案都已经过时了。
逃避元素边界的最简单方法是添加:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
可以在这里和这里找到讨论。对于即将到来的grid-layouts也有一个很好的解决方案。
如果我理解正确,
style="width: 100%; position:absolute;"
应该实现你的目标。
这样做在语义上更正确的方法是将标题放在主容器之外,避免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 (或部分)应该包含元素,而不是让它们超出其父 div/部分的范围。如果您的子 div 扩展到父 div 之外,您还将在 IE 中遇到问题(我相信任何 7 或以下,这可能只是 IE6 或更低)。
有几种方法可以做到这一点。
绝对定位
就像其他人建议的那样,如果您为要在页面上伸展的元素提供 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 样式,并使页眉的内容延伸到页面的边缘。
祝你好运!