Div 100% ширины внутри рамы

Question

Div 100% ширины внутри рамы

0

У меня есть два 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;
    }

Awais Imran 18 дек. 2013, в 18:22

Источник

Теги:

html

css

css3

xhtml

3 ответа

Ещё вопросы

Godinall · Answer 1 · 2013-12-18T14-09-00.000Z

ваш заголовок слишком широк и растягивает весь кадр. вы должны либо сделать свой заголовок 100% вместо фиксированного 1200px, либо дать вашему серому стержню ту же фиксированную ширину, что и заголовок

Turnip · Answer 2 · 2013-12-18T15-43-00.000Z

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

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

Спасибо за ваше решение, но можем ли мы использовать обертку шириной 100% вместо 1200 пикселей? Мне нужно все гибкое. Пожалуйста, руководство ... Спасибо

BlackPOP · Answer 3 · 2013-12-18T14-33-00.000Z

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

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