让子div跨越页面宽度

时间:2011-04-08 03:48:18

标签: html css

假设我有以下HTML代码:

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100%; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

如果我希望help_panel div跨越页面/ broswer的宽度,即使页面/浏览器的宽度大于960px(这是为容器div设置的宽度),是否可以执行它具有上述结构?如果页面宽度超过960px,我想让帮助面板div扩展到容器div中设置的宽度限制之外。

如果可以通过上述结构实现这一点,我很好奇。或者我是否必须将help_panel div放在容器div之外才能使其工作?

谢谢!

12 个答案:

答案 0 :(得分:41)

是的,可以做到。你需要使用

position:absolute;
left:0;
right:0;

检查http://jsfiddle.net/bJbgJ/3/

处的工作示例

答案 1 :(得分:26)

使用当前的浏览器(这个问题现在约会了一点),您可以使用更简单的vw(视口宽度)单位:

#help_panel {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

(使用数据:http://caniuse.com/#feat=viewport-units

从我的测试来看,这不应该在易于使用的情况下破坏你的流程。

答案 2 :(得分:1)

可以使用jQuery ...

$("#help_panel").width($(window).width());

否则,就css而言,我非常确定你必须使用help_panel样式container position:absolute以外的{{1}} div:http://css-tricks.com/forums/discussion/2318/give-child-div-width%3A100-of-page-width-inside-parent./p1

答案 3 :(得分:1)

是的,您可以为容器设置position: relative,为help_panel设置position: absolute

答案 4 :(得分:1)

我知道这篇文章很旧,如果有人在2019年偶然发现它,可以尝试一下。

//html
<div id="container">
<div id="help_panel">
<div class="help_panel_extra_if_you_want"> //then if you want to add some height and width if you want, do this.

</div>
</div>
</div>

//css
#container{
left: 0px;
top: 0px;
right: 0px;
z-index: 100;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;    
position: relative;
height:650px;
margin-top:55px;
margin-bottom:-20px;
}

#help_panel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-right: 24px;
padding-left: 18px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

.help_panel_extra_if_you_want{
height:650px;
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
display: flex;
width: 95%;
max-width: 1200px;
}

应该给你一些像这样的东西 This is how it would look, adjust the width and margin and padding to achieve what you want

答案 5 :(得分:0)

您可以通过在其上设置position:absolute将其拉出流程,但是您将遇到不同的显示问题。或者您可以将宽度明确设置为&gt; 960。

答案 6 :(得分:0)

你可以把它从位置:绝对的流量中取出来。但是helper_panel会与其他东西结合起来。 (我添加了订单,看看divs)

<div id="container" style="width: 960px; border:1px solid #f00;">
    Text before<br>
   <div id="help_panel" style="width: 100%; position:absolute; margin: 0 auto; border:1px solid #0f0;">
     Content goes here.
   </div> 
   This is behind the help_penal
</div>

答案 7 :(得分:0)

只需将宽度设置为100vw:

<div id="container" style="width: 100vw">
 <div id="help_panel" style="width: 100%; margin: 0 auto;">
  Content goes here.
 </div> 
</div>

答案 8 :(得分:0)

您可以使用100vw(视口宽度)。 100vw表示100%的视口。 vwsupported by all major browsers, including IE9+

<div id="container" style="width: 960px">
   <div id="help_panel" style="width: 100vw; margin: 0 auto;">
     Content goes here.
   </div> 
</div>

答案 9 :(得分:0)

由于position: absolute;和视口宽度在我的特殊情况下没有选项,因此还有另一种解决问题的快速解决方案。唯一的条件是,您的网站不需要x方向的溢出。

您可以为元素定义负边距:

#help_panel {
    margin-left: -9999px;
    margin-right: -9999px;
}

但是由于我们这样做会溢出,我们必须避免全局x方向溢出,例如身体:

body {
    overflow-x: hidden;
}

您可以设置padding来选择内容的大小。

注意此解决方案不会为内容带来100%的宽度,但在您需要的情况下有用,例如背景颜色,全宽,内容仍取决于容器。

答案 10 :(得分:0)

...............以HTML格式

<div id="a">Full Width</div>

...............用CSS格式

#a { background-color: green;width: 100%;height: 80px;border: 1px solid;margin: 0 auto;} 

    body { padding: 0;margin: 0}

答案 11 :(得分:-2)

你可以这样做:

margin-left: -50%;
margin-right: -50%;