框架内的div 100％宽度问题

我在主框架内有两个div（粉色和灰色）。粉红色div的固定宽度为1200px（这是动态的，可以在每个负载上将其更改为1400px，1800px，2200px或其他），而灰色div的宽度为100％。当您将框架滚动到右侧时，您会注意到灰色条不会100％地到达页面的末尾。请指导我如何将灰色条100％宽到页面末尾？框架内的div 100％宽度问题

例子：http://jsfiddle.net/awaises/r3C4B/1/

下面是我的代码：

<div class="frame"> 
    <div class="header">Page Header</div> 
    <div class="gray-bar">Edit | Delete</div> 
</div> 

.frame{overflow-x: scroll;} 
.header{ 
    border:1px solid black; 
    width:1200px; 
    background:pink; 
    text-align:center; 
    font-size:20px; 
    } 
.gray-bar{ 
    padding: 6px; 
    width:100%; 
    height: 20px; 
    background:#e6e6e5; 
    clear:both; 
    }

来源

2013-12-18 Awais Imran

你的头太宽，拉伸整个帧。你必须使你的标题100％，而不是一个固定的1200px或给你的灰色条与标题相同的固定宽度

来源

2013-12-18 16:45:07 Godinall

你试图设置标题标记的宽度在像素和灰色标记在％。它不会工作，因为在灰色标签你提到它为100％，它只能看到窗口的可见部分。如果你想保持相同的宽度变化宽度100％或宽度1200px。参考

"http://jsfiddle.net/sidharthan_r/r3C4B/4/"

来源

2013-12-18 16:45:54 BlackPOP

我想你将不得不增加更多的标记来实现这一目标。

DEMO

裹.header并在容器.gray-bar和改变容器的宽度，而不是.header

<div class="frame"> 
    <div class="wrapper"> 
     <div class="header">Page Header</div> 
     <div class="gray-bar">Edit | Delete</div> 
    </div> 
</div>

.frame{overflow-x: scroll;} 
.header{ 
    border:1px solid black; 
    width:100%; /* THIS BECOMES 100% */ 
    background:pink; 
    text-align:center; 
    font-size:20px; 
    } 
.gray-bar{ 
    padding: 6px; 
    width:100%; 
    height: 20px; 
    background:#e6e6e5; 
    clear:both; 
    } 
.wrapper { 
    width: 1200px; 
}

来源

2013-12-18 16:46:01 Turnip

感谢您的解决方案，但我们可以用包装宽度100％而不是1200px？我需要一切灵活。请指导...谢谢 –

框架内的div 100％宽度问题

回答

相关问题