Html 使子 div 跨页面宽度拉伸

Make child div stretch across width of page

提问by Bug Magnet

Suppose I have the following HTML code:

假设我有以下 HTML 代码：

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

If I want the help_panel div to stretch across the width of the page/broswer, even if the width of the page/browser is wider than 960px (which is the width set for the container div), is it possible to do it with the above structure? I want to get the help panel div to expand beyond the width limits set in the container div if the page is wider than 960px.

如果我希望 help_panel div 横跨页面/浏览器的宽度，即使页面/浏览器的宽度大于 960px（这是为容器 div 设置的宽度），是否可以使用以上结构？如果页面宽度超过 960 像素，我想让帮助面板 div 扩展到超出容器 div 中设置的宽度限制。

I am curious if this can be accomplished with the above structure. Or will I have to put the help_panel div outside of the container div to make it work?

我很好奇这是否可以通过上述结构来完成。或者我是否必须将 help_panel div 放在容器 div 之外才能使其工作？

Thanks!

谢谢！

回答by Hussein

Yes it can be done. You need to use

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

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

Check working example at http://jsfiddle.net/bJbgJ/3/

在http://jsfiddle.net/bJbgJ/3/检查工作示例

回答by Stephane Rodet

With current browsers (this question is dating a bit now), you can use the much simpler vw(viewport width) unit:

使用当前的浏览器（这个问题现在有点过时了），您可以使用更简单的vw（视口宽度）单位：

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

(usage data: http://caniuse.com/#feat=viewport-units)

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

From my tests, this should not break your flow while being easy to use.

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

回答by Kent

Yes you can, set the position: relativefor the container and position: absolutefor the help_panel

是的，您可以，position: relative为容器和position: absolutehelp_panel 设置

回答by Mrs. Yuzirui

...............In HTML Format

.....HTML 格式

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

...............In CSS Format

..... 以 CSS 格式

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

    body { padding: 0;margin: 0}

回答by Shasha

I know this post is old, in case someone stumbles upon it in 2019, this would work try it.

我知道这篇文章很旧，万一有人在 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;
}

SHOULD GIVE YOU SOMETHING LIKE THIS

应该给你这样的东西

回答by Josiah Nunemaker

Just set the width to 100vw like this:

只需像这样将宽度设置为 100vw：

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

回答by Aminah Nuraini

You can use 100vw(viewport width). 100vwmeans 100% of the viewport. vwis supported by all major browsers, including IE9+.

您可以使用100vw（视口宽度）。100vw表示 100% 的视口。所有主流浏览器vw都支持，包括 IE9+。

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

回答by sagacity

Since position: absolute;and viewport width were no options in my special case, there is another quick solution to solve the problem. The only condition is, that overflow in x-direction is not necessary for your website.

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

You can define negative margins for your element:

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

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

But since we get overflow doing this, we have to avoid overflow in x-direction globally e.g. for body:

但是由于这样做会导致溢出，因此我们必须全局避免 x 方向上的溢出，例如对于 body：

body {
    overflow-x: hidden;
}

You can set paddingto choose the size of your content.

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

Notethat this solution does not bring 100% width for content, but it is helpful in cases where you need e.g. a background color which has full width with a content still depending on container.

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

回答by Mark Kahn

you can pull it out of the flow by setting position:absoluteon it, but you'll have different display issues to deal with. Or you can explicitly set the width to > 960.

您可以通过设置将其从流程中拉出position:absolute，但您将有不同的显示问题需要处理。或者您可以明确地将宽度设置为 > 960。

回答by Damien-Wright

You coulddo it with jQuery...

你可以用jQuery来做...

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

Otherwise, as far as css goes, I'm fairly sure you would have to sit the help_paneldiv on the outside of containerusing position:absolutestyling: http://css-tricks.com/forums/discussion/2318/give-child-div-width%3A100-of-page-width-inside-parent./p1

否则，就 css 而言，我很确定您必须将help_paneldiv 放在container使用position:absolute样式的外部：http: //css-tricks.com/forums/discussion/2318/give-child-div-width %3A100-of-page-width-inside-parent./p1