我可以从一个居中的包装器中将元素拉伸到浏览器窗口的右侧吗？

Question

I'm having some trouble figuring out how to do this. 我在弄清楚如何做到这一点时遇到了一些麻烦。 I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars. 我想有一个包装器，所以我的网站居中，但其中一个标题元素需要一直延伸到页面的右边缘，但不扩展页面的宽度和添加滚动条。

See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can't add image) 看到这里： http ： //i49.tinypic.com/6rkaxc.jpg （新海报所以无法添加图片）

The blue outline represents the centered wrapper, and the orange box is the header div that I'm trying to get to fit to the right side of the page. 蓝色轮廓表示居中的包装，橙色框是我试图适应页面右侧的标题div。 I've got it to work using 100% width but it creates a horizontal page scroll since it's making it the same width as it's parent. 我已经让它使用100％宽度工作，但它创建了一个水平页面滚动，因为它使它的宽度与它的父级相同。 I want it to expand for users that have higher resolutions so it always fits snug to the right side. 我希望它扩展到具有更高分辨率的用户，因此它始终适合于右侧。 I hope this makes sense. 我希望这是有道理的。

my code looks something like... 我的代码看起来像......

<body>
<div id="wrapper">
   <div id="header">
   </div>

   <div id="left">
   </div>

   <div id="right">
   </div>
</div>
</body>

CSS: CSS：

div#wrapper {
 margin: 0 auto;
 width: 1020px;
 position: relative;
}

div#header {
 height: 150px;
 position: absolute;
 left: 510px;
 width: 100%;
}

div#left {
 width: 510px;
 float: left;
}

div#right {
 width: 100%;
 float: left;
}

I'm pretty new to this stuff so if you notice any errors here or bad practices please point them out! 我对这些东西很新，所以如果你发现任何错误或不良做法，请指出它们！ Thanks for the help! 谢谢您的帮助！ :) :)

Answer 1

Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. 由于您希望内容的宽度是固定的，因此策略是为左右内容提供容器。 This allows you to use width: 100% for the header which will extend to the end without scroll bars. 这允许您使用width: 100%作为标题，它将延伸到没有滚动条的结尾。 You then make the header relative to the right container. 然后，您将相对于正确的容器创建标题。 Here is a jsfiddle you can play with. 这是一个你可以玩的jsfiddle。

Note I made the widths smaller so it would fit in my jsfiddle window. 注意我将宽度设置得更小，因此它适合我的jsfiddle窗口。

HTML: HTML：

<body>
    <div id="wrapper">
       <div id="leftContainer">
           <div id="left">
               This is left
           </div>
       </div>
       <div id="rightContainer">              
           <div id="header">
              This is a header
           </div>   
           <div id="right">
              This is right
           </div>        
       </div>
   </div>
</body>

CSS: CSS：

div#wrapper {
 text-align: center;
 width: 100%;
 position: relative;
 white-space: nowrap;    
 overflow-x: scroll;  
}

div#header {
 z-index: 1000;
 height: 150px;
 position: absolute;
 left: 0;
 width: 100%;
 background: green;    
}

div#leftContainer {
 float: left;
 width: 50%;
 height: 500px;
 display: inline-block; 
}

div#left {
 float: right;
 width: 260px;
 height: 300px;
 background-color: purple;
}

div#rightContainer {
 position: relative;
 float: right;
 width: 50%;
 height: 500px;    
 display: inline-block;  
}

div#right {
 width: 260px;
 height: 300px;
 background-color: yellow;
}

Answer 2

Try this one. 试试这个吧。 I changed the wrapper width to 80%. 我将包装宽度更改为80％。 Not sure if that's ok. 不确定是否可以。 But I works well when expanding the page. 但是我在扩展页面时效果很好。 Moved the header outside of wrapper and also added background color for clarity. 为了清晰起见，将标题移到了包装器外面并添加了背景颜色。

Note 1: right DIV's margin-top is same size as header DIV's height. 注1：右侧DIV的margin-top与标题DIV的高度相同。

HTML HTML

<div id="outerWrapper">
    <div id="header">
            Header
    </div>
    <div id="wrapper">


        <div id="left">
            Left
        </div>

        <div id="right">
            Right
        </div>
    </div>
</div>

CSS CSS

div#wrapper {
 margin: 0 auto;
 width: 80%;
 height: 100%;
 position: relative;
 background-color: #CCCCCC;
}

div#header {
 height: 150px;
 float: right;
 position: absolute; 
 left: 50%;
 width: 50%;
 background-color: yellow;
}

div#left {
 width: 50%;
 height: 100%;
 float: left;
 background-color: red;
}

div#right {
 width: 50%;
 height: 100%;
 float: left;
 margin-top: 150px;
 background-color: blue;
}

Hope this helps. 希望这可以帮助。

我可以从一个居中的包装器中将元素拉伸到浏览器窗口的右侧吗？

问题描述

2 个解决方案

解决方案1
0 已采纳 2012-10-23 23:02:23

解决方案2
0 2012-10-23 23:41:11

我可以从一个居中的包装器中将元素拉伸到浏览器窗口的右侧吗？

问题描述

2 个解决方案

解决方案1 0 已采纳 2012-10-23 23:02:23

解决方案2 0 2012-10-23 23:41:11

解决方案1
0 已采纳 2012-10-23 23:02:23

解决方案2
0 2012-10-23 23:41:11