Div 100% ширина в рамке

Question

У меня есть два divs (розовый и серый) внутри основной рамы. Розовый 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

Вы попытались установить ширину для тега заголовка в пикселе и сером теге в%. Это не работает, потому что серый тег u упомянуть его как 100%, он принимает только видимую часть окна. если вы хотите сохранить ширину ширины одинаковой ширины 100% или ширину 1200 пикселей. см

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

Answer 3

Я думаю, вы должны добавить больше разметки для достижения этой цели.

DEMO

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