Question

我在主框架内有两个div（粉红色和灰色）。 Pink div的固定宽度为1200px（这是动态的，可以在每次加载时更改为1400px，1800px，2200px或其他），而灰色div的宽度为100％。当您将框架向右滚动时，您会发现灰色条不会100％到达页面末尾。请指导我如何将灰色条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;
    }

Answer 1

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

Answer 2

你试图在像素和灰色标签中设置标头标签的宽度，以％为单位。它不会起作用，因为在灰色标签中你提到它为100％它只占用窗口的可见部分。如果要保持两个相同的宽度更改宽度100％或宽度1200px。参考

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

Answer 3

我认为您必须添加更多标记才能实现此目的。

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;
}

在框架内划分100％宽度问题

3 个答案: